新增登录注册背景图设置
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
// 写入数据库
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -97,6 +97,8 @@ export interface AdminConfig {
|
||||
enableCache: boolean; // 是否启用浏览器缓存
|
||||
cacheMinutes: number; // 缓存时间(分钟)
|
||||
cacheVersion: number; // CSS版本号(用于缓存控制)
|
||||
loginBackgroundImage?: string; // 登录界面背景图
|
||||
registerBackgroundImage?: string; // 注册界面背景图
|
||||
};
|
||||
OpenListConfig?: {
|
||||
Enabled: boolean; // 是否启用私人影库功能
|
||||
|
||||
Reference in New Issue
Block a user