新增登录注册背景图设置

This commit is contained in:
mtvpls
2025-12-28 12:12:11 +08:00
parent d4ae874bc0
commit ab856a02cf
7 changed files with 317 additions and 36 deletions

View File

@@ -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

View File

@@ -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,
};
// 写入数据库

View File

@@ -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);
}

View File

@@ -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 (

View File

@@ -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>

View File

@@ -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>

View File

@@ -97,6 +97,8 @@ export interface AdminConfig {
enableCache: boolean; // 是否启用浏览器缓存
cacheMinutes: number; // 缓存时间(分钟)
cacheVersion: number; // CSS版本号用于缓存控制
loginBackgroundImage?: string; // 登录界面背景图
registerBackgroundImage?: string; // 注册界面背景图
};
OpenListConfig?: {
Enabled: boolean; // 是否启用私人影库功能