From ab856a02cf4bf6b6d06798085099286a69581608 Mon Sep 17 00:00:00 2001
From: mtvpls <mtvpls@redaaa.ip-ddns.com>
Date: Sun, 28 Dec 2025 12:12:11 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=99=BB=E5=BD=95=E6=B3=A8?=
 =?UTF-8?q?=E5=86=8C=E8=83=8C=E6=99=AF=E5=9B=BE=E8=AE=BE=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/admin/page.tsx             | 174 ++++++++++++++++++++++++++++-
 src/app/api/admin/theme/route.ts   |  39 +++++++
 src/app/api/server-config/route.ts |   2 +
 src/app/layout.tsx                 |  27 +++++
 src/app/login/page.tsx             |  55 +++++----
 src/app/register/page.tsx          |  54 ++++++---
 src/lib/admin.types.ts             |   2 +
 7 files changed, 317 insertions(+), 36 deletions(-)

diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index a0fe34b..c3f25ec 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -5091,6 +5091,8 @@ const ThemeConfigComponent = ({
     enableCache: true,
     cacheMinutes: 1440, // 默认1天（1440分钟）
   });
+  const [loginBackgroundImages, setLoginBackgroundImages] = useState<string[]>(['']);
+  const [registerBackgroundImages, setRegisterBackgroundImages] = useState<string[]>(['']);
 
   useEffect(() => {
     if (config?.ThemeConfig) {
@@ -5101,18 +5103,77 @@ const ThemeConfigComponent = ({
         enableCache: config.ThemeConfig.enableCache !== false,
         cacheMinutes: config.ThemeConfig.cacheMinutes || 1440,
       });
+
+      // 解析背景图配置
+      if (config.ThemeConfig.loginBackgroundImage) {
+        const urls = config.ThemeConfig.loginBackgroundImage
+          .split('\n')
+          .map((url) => url.trim())
+          .filter((url) => url !== '');
+        setLoginBackgroundImages(urls.length > 0 ? urls : ['']);
+      } else {
+        setLoginBackgroundImages(['']);
+      }
+
+      if (config.ThemeConfig.registerBackgroundImage) {
+        const urls = config.ThemeConfig.registerBackgroundImage
+          .split('\n')
+          .map((url) => url.trim())
+          .filter((url) => url !== '');
+        setRegisterBackgroundImages(urls.length > 0 ? urls : ['']);
+      } else {
+        setRegisterBackgroundImages(['']);
+      }
     }
   }, [config]);
 
   const handleSave = async () => {
     await withLoading('saveThemeConfig', async () => {
       try {
+        // 验证登录背景图URL格式
+        const validLoginUrls = loginBackgroundImages
+          .map((url) => url.trim())
+          .filter((url) => url !== '');
+
+        for (const url of validLoginUrls) {
+          if (!url.startsWith('http://') && !url.startsWith('https://')) {
+            showAlert({
+              type: 'error',
+              title: '格式错误',
+              message: `登录界面背景图URL格式错误：${url}\n每个URL必须以http://或https://开头`,
+              showConfirm: true,
+            });
+            return;
+          }
+        }
+
+        // 验证注册背景图URL格式
+        const validRegisterUrls = registerBackgroundImages
+          .map((url) => url.trim())
+          .filter((url) => url !== '');
+
+        for (const url of validRegisterUrls) {
+          if (!url.startsWith('http://') && !url.startsWith('https://')) {
+            showAlert({
+              type: 'error',
+              title: '格式错误',
+              message: `注册界面背景图URL格式错误：${url}\n每个URL必须以http://或https://开头`,
+              showConfirm: true,
+            });
+            return;
+          }
+        }
+
         const response = await fetch('/api/admin/theme', {
           method: 'POST',
           headers: {
             'Content-Type': 'application/json',
           },
-          body: JSON.stringify(themeSettings),
+          body: JSON.stringify({
+            ...themeSettings,
+            loginBackgroundImage: validLoginUrls.join('\n'),
+            registerBackgroundImage: validRegisterUrls.join('\n'),
+          }),
         });
 
         const data = await response.json();
@@ -5361,6 +5422,117 @@ const ThemeConfigComponent = ({
         </p>
       </div>
 
+      {/* 背景图配置 */}
+      <div className='bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700'>
+        <h3 className='text-lg font-semibold text-gray-900 dark:text-gray-100 mb-4'>
+          背景图配置
+        </h3>
+        <div className='space-y-6'>
+          {/* 登录界面背景图 */}
+          <div>
+            <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+              登录界面背景图
+            </label>
+            <div className='space-y-2'>
+              {loginBackgroundImages.map((url, index) => (
+                <div key={index} className='flex gap-2'>
+                  <input
+                    type='text'
+                    value={url}
+                    onChange={(e) => {
+                      const newImages = [...loginBackgroundImages];
+                      newImages[index] = e.target.value;
+                      setLoginBackgroundImages(newImages);
+                    }}
+                    placeholder='请输入登录界面背景图URL (http:// 或 https://)'
+                    className='flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm'
+                  />
+                  {loginBackgroundImages.length > 1 && (
+                    <button
+                      type='button'
+                      onClick={() => {
+                        setLoginBackgroundImages(
+                          loginBackgroundImages.filter((_, i) => i !== index)
+                        );
+                      }}
+                      className='px-3 py-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors'
+                      title='删除'
+                    >
+                      <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
+                      </svg>
+                    </button>
+                  )}
+                </div>
+              ))}
+              <button
+                type='button'
+                onClick={() => setLoginBackgroundImages([...loginBackgroundImages, ''])}
+                className='flex items-center gap-2 px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'
+              >
+                <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 4v16m8-8H4' />
+                </svg>
+                <span>添加URL</span>
+              </button>
+            </div>
+          </div>
+
+          {/* 注册界面背景图 */}
+          <div>
+            <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
+              注册界面背景图
+            </label>
+            <div className='space-y-2'>
+              {registerBackgroundImages.map((url, index) => (
+                <div key={index} className='flex gap-2'>
+                  <input
+                    type='text'
+                    value={url}
+                    onChange={(e) => {
+                      const newImages = [...registerBackgroundImages];
+                      newImages[index] = e.target.value;
+                      setRegisterBackgroundImages(newImages);
+                    }}
+                    placeholder='请输入注册界面背景图URL (http:// 或 https://)'
+                    className='flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent font-mono text-sm'
+                  />
+                  {registerBackgroundImages.length > 1 && (
+                    <button
+                      type='button'
+                      onClick={() => {
+                        setRegisterBackgroundImages(
+                          registerBackgroundImages.filter((_, i) => i !== index)
+                        );
+                      }}
+                      className='px-3 py-2 text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors'
+                      title='删除'
+                    >
+                      <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
+                      </svg>
+                    </button>
+                  )}
+                </div>
+              ))}
+              <button
+                type='button'
+                onClick={() => setRegisterBackgroundImages([...registerBackgroundImages, ''])}
+                className='flex items-center gap-2 px-4 py-2 text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors'
+              >
+                <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
+                  <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 4v16m8-8H4' />
+                </svg>
+                <span>添加URL</span>
+              </button>
+            </div>
+          </div>
+        </div>
+        <p className='mt-4 text-sm text-gray-600 dark:text-gray-400'>
+          配置登录和注册页面的背景图链接，留空则使用默认样式。支持配置多张图片，将随机展示其中一张
+        </p>
+      </div>
+
       {/* 保存按钮 */}
       <div className='flex justify-end'>
         <button
diff --git a/src/app/api/admin/theme/route.ts b/src/app/api/admin/theme/route.ts
index cf05110..b759fe9 100644
--- a/src/app/api/admin/theme/route.ts
+++ b/src/app/api/admin/theme/route.ts
@@ -34,12 +34,16 @@ export async function POST(request: NextRequest) {
       customCSS,
       enableCache,
       cacheMinutes,
+      loginBackgroundImage,
+      registerBackgroundImage,
     } = body as {
       enableBuiltInTheme: boolean;
       builtInTheme: string;
       customCSS: string;
       enableCache: boolean;
       cacheMinutes: number;
+      loginBackgroundImage?: string;
+      registerBackgroundImage?: string;
     };
 
     // 参数校验
@@ -53,6 +57,39 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: '参数格式错误' }, { status: 400 });
     }
 
+    // 验证背景图URL格式（支持多行，每行一个URL）
+    if (loginBackgroundImage && loginBackgroundImage.trim() !== '') {
+      const urls = loginBackgroundImage
+        .split('\n')
+        .map((url) => url.trim())
+        .filter((url) => url !== '');
+
+      for (const url of urls) {
+        if (!url.startsWith('http://') && !url.startsWith('https://')) {
+          return NextResponse.json(
+            { error: `登录界面背景图URL格式错误：${url}，每个URL必须以http://或https://开头` },
+            { status: 400 }
+          );
+        }
+      }
+    }
+
+    if (registerBackgroundImage && registerBackgroundImage.trim() !== '') {
+      const urls = registerBackgroundImage
+        .split('\n')
+        .map((url) => url.trim())
+        .filter((url) => url !== '');
+
+      for (const url of urls) {
+        if (!url.startsWith('http://') && !url.startsWith('https://')) {
+          return NextResponse.json(
+            { error: `注册界面背景图URL格式错误：${url}，每个URL必须以http://或https://开头` },
+            { status: 400 }
+          );
+        }
+      }
+    }
+
     const adminConfig = await getConfig();
 
     // 权限校验
@@ -82,6 +119,8 @@ export async function POST(request: NextRequest) {
       enableCache,
       cacheMinutes,
       cacheVersion: cssChanged ? currentVersion + 1 : currentVersion,
+      loginBackgroundImage: loginBackgroundImage?.trim() || undefined,
+      registerBackgroundImage: registerBackgroundImage?.trim() || undefined,
     };
 
     // 写入数据库
diff --git a/src/app/api/server-config/route.ts b/src/app/api/server-config/route.ts
index 1b54787..4d83636 100644
--- a/src/app/api/server-config/route.ts
+++ b/src/app/api/server-config/route.ts
@@ -47,6 +47,8 @@ export async function GET(request: NextRequest) {
     EnableOIDCLogin: config.SiteConfig.EnableOIDCLogin || false,
     EnableOIDCRegistration: config.SiteConfig.EnableOIDCRegistration || false,
     OIDCButtonText: config.SiteConfig.OIDCButtonText || '',
+    loginBackgroundImage: config.ThemeConfig?.loginBackgroundImage || '',
+    registerBackgroundImage: config.ThemeConfig?.registerBackgroundImage || '',
   };
   return NextResponse.json(result);
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index df5fbd3..a48c806 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -64,6 +64,15 @@ export default async function RootLayout({
   let recommendationDataSource = 'Mixed';
   let tmdbApiKey = '';
   let openListEnabled = false;
+  let loginBackgroundImage = '';
+  let registerBackgroundImage = '';
+  let enableRegistration = false;
+  let loginRequireTurnstile = false;
+  let registrationRequireTurnstile = false;
+  let turnstileSiteKey = '';
+  let enableOIDCLogin = false;
+  let enableOIDCRegistration = false;
+  let oidcButtonText = '';
   let customCategories = [] as {
     name: string;
     type: 'movie' | 'tv';
@@ -90,6 +99,15 @@ export default async function RootLayout({
     enableComments = config.SiteConfig.EnableComments;
     recommendationDataSource = config.SiteConfig.RecommendationDataSource || 'Mixed';
     tmdbApiKey = config.SiteConfig.TMDBApiKey || '';
+    loginBackgroundImage = config.ThemeConfig?.loginBackgroundImage || '';
+    registerBackgroundImage = config.ThemeConfig?.registerBackgroundImage || '';
+    enableRegistration = config.SiteConfig.EnableRegistration || false;
+    loginRequireTurnstile = config.SiteConfig.LoginRequireTurnstile || false;
+    registrationRequireTurnstile = config.SiteConfig.RegistrationRequireTurnstile || false;
+    turnstileSiteKey = config.SiteConfig.TurnstileSiteKey || '';
+    enableOIDCLogin = config.SiteConfig.EnableOIDCLogin || false;
+    enableOIDCRegistration = config.SiteConfig.EnableOIDCRegistration || false;
+    oidcButtonText = config.SiteConfig.OIDCButtonText || '';
     // 检查是否启用了 OpenList 功能
     openListEnabled = !!(
       config.OpenListConfig?.Enabled &&
@@ -115,6 +133,15 @@ export default async function RootLayout({
     ENABLE_OFFLINE_DOWNLOAD: process.env.NEXT_PUBLIC_ENABLE_OFFLINE_DOWNLOAD === 'true',
     VOICE_CHAT_STRATEGY: process.env.NEXT_PUBLIC_VOICE_CHAT_STRATEGY || 'webrtc-fallback',
     OPENLIST_ENABLED: openListEnabled,
+    LOGIN_BACKGROUND_IMAGE: loginBackgroundImage,
+    REGISTER_BACKGROUND_IMAGE: registerBackgroundImage,
+    ENABLE_REGISTRATION: enableRegistration,
+    LOGIN_REQUIRE_TURNSTILE: loginRequireTurnstile,
+    REGISTRATION_REQUIRE_TURNSTILE: registrationRequireTurnstile,
+    TURNSTILE_SITE_KEY: turnstileSiteKey,
+    ENABLE_OIDC_LOGIN: enableOIDCLogin,
+    ENABLE_OIDC_REGISTRATION: enableOIDCRegistration,
+    OIDC_BUTTON_TEXT: oidcButtonText,
   };
 
   return (
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index afafe52..1b8e419 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -81,16 +81,42 @@ function LoginPageClient() {
   const [turnstileLoaded, setTurnstileLoaded] = useState(false);
   const [siteConfig, setSiteConfig] = useState<any>(null);
   const [turnstileWidgetId, setTurnstileWidgetId] = useState<string | null>(null);
+  const [backgroundImage, setBackgroundImage] = useState<string>('');
 
   const { siteName } = useSite();
 
   // 在客户端挂载后设置配置
   useEffect(() => {
     if (typeof window !== 'undefined') {
-      const storageType = (window as any).RUNTIME_CONFIG?.STORAGE_TYPE;
+      const runtimeConfig = (window as any).RUNTIME_CONFIG;
+      const storageType = runtimeConfig?.STORAGE_TYPE;
       const shouldAsk = storageType && storageType !== 'localstorage';
       setShouldAskUsername(shouldAsk);
 
+      // 设置背景图（支持多张随机选择）
+      const loginBg = runtimeConfig?.LOGIN_BACKGROUND_IMAGE;
+      if (loginBg) {
+        const urls = loginBg
+          .split('\n')
+          .map((url: string) => url.trim())
+          .filter((url: string) => url !== '');
+
+        if (urls.length > 0) {
+          // 随机选择一张背景图
+          const randomIndex = Math.floor(Math.random() * urls.length);
+          setBackgroundImage(urls[randomIndex]);
+        }
+      }
+
+      // 设置站点配置
+      setSiteConfig({
+        LoginRequireTurnstile: runtimeConfig?.LOGIN_REQUIRE_TURNSTILE || false,
+        TurnstileSiteKey: runtimeConfig?.TURNSTILE_SITE_KEY || '',
+        EnableRegistration: runtimeConfig?.ENABLE_REGISTRATION || false,
+        EnableOIDCLogin: runtimeConfig?.ENABLE_OIDC_LOGIN || false,
+        OIDCButtonText: runtimeConfig?.OIDC_BUTTON_TEXT || '',
+      });
+
       // 从localStorage读取记住的密码信息
       const rememberedCredentials = localStorage.getItem('rememberedCredentials');
       if (rememberedCredentials) {
@@ -111,23 +137,6 @@ function LoginPageClient() {
     }
   }, []);
 
-  // 获取站点配置
-  useEffect(() => {
-    const fetchConfig = async () => {
-      try {
-        const res = await fetch('/api/server-config');
-        if (res.ok) {
-          const config = await res.json();
-          setSiteConfig(config);
-        }
-      } catch (error) {
-        console.error('Failed to fetch config:', error);
-      }
-    };
-
-    fetchConfig();
-  }, []);
-
   // 加载Cloudflare Turnstile脚本
   useEffect(() => {
     if (!siteConfig?.LoginRequireTurnstile || !siteConfig?.TurnstileSiteKey) {
@@ -235,7 +244,15 @@ function LoginPageClient() {
 
 
   return (
-    <div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
+    <div
+      className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'
+      style={backgroundImage ? {
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat'
+      } : undefined}
+    >
       <div className='absolute top-4 right-4'>
         <ThemeToggle />
       </div>
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 7d37b16..c8428e7 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -81,29 +81,43 @@ function RegisterPageClient() {
   const [turnstileLoaded, setTurnstileLoaded] = useState(false);
   const [siteConfig, setSiteConfig] = useState<any>(null);
   const [turnstileWidgetId, setTurnstileWidgetId] = useState<string | null>(null);
+  const [backgroundImage, setBackgroundImage] = useState<string>('');
 
   const { siteName } = useSite();
 
-  // 获取站点配置
+  // 在客户端挂载后设置配置
   useEffect(() => {
-    const fetchConfig = async () => {
-      try {
-        const res = await fetch('/api/server-config');
-        if (res.ok) {
-          const config = await res.json();
-          setSiteConfig(config);
+    if (typeof window !== 'undefined') {
+      const runtimeConfig = (window as any).RUNTIME_CONFIG;
 
-          // 如果未开启注册，重定向到登录页
-          if (!config.EnableRegistration) {
-            router.replace('/login');
-          }
+      // 设置背景图（支持多张随机选择）
+      const registerBg = runtimeConfig?.REGISTER_BACKGROUND_IMAGE;
+      if (registerBg) {
+        const urls = registerBg
+          .split('\n')
+          .map((url: string) => url.trim())
+          .filter((url: string) => url !== '');
+
+        if (urls.length > 0) {
+          // 随机选择一张背景图
+          const randomIndex = Math.floor(Math.random() * urls.length);
+          setBackgroundImage(urls[randomIndex]);
         }
-      } catch (error) {
-        console.error('Failed to fetch config:', error);
       }
-    };
 
-    fetchConfig();
+      // 设置站点配置
+      const config = {
+        EnableRegistration: runtimeConfig?.ENABLE_REGISTRATION || false,
+        RegistrationRequireTurnstile: runtimeConfig?.REGISTRATION_REQUIRE_TURNSTILE || false,
+        TurnstileSiteKey: runtimeConfig?.TURNSTILE_SITE_KEY || '',
+      };
+      setSiteConfig(config);
+
+      // 如果未开启注册，重定向到登录页
+      if (!config.EnableRegistration) {
+        router.replace('/login');
+      }
+    }
   }, [router]);
 
   // 加载Cloudflare Turnstile脚本
@@ -224,7 +238,15 @@ function RegisterPageClient() {
   }
 
   return (
-    <div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
+    <div
+      className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'
+      style={backgroundImage ? {
+        backgroundImage: `url(${backgroundImage})`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat'
+      } : undefined}
+    >
       <div className='absolute top-4 right-4'>
         <ThemeToggle />
       </div>
diff --git a/src/lib/admin.types.ts b/src/lib/admin.types.ts
index e3c4671..4484435 100644
--- a/src/lib/admin.types.ts
+++ b/src/lib/admin.types.ts
@@ -97,6 +97,8 @@ export interface AdminConfig {
     enableCache: boolean; // 是否启用浏览器缓存
     cacheMinutes: number; // 缓存时间（分钟）
     cacheVersion: number; // CSS版本号（用于缓存控制）
+    loginBackgroundImage?: string; // 登录界面背景图
+    registerBackgroundImage?: string; // 注册界面背景图
   };
   OpenListConfig?: {
     Enabled: boolean; // 是否启用私人影库功能