yeyinly/MoonTVPlus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加首页背景图设置

Browse Source
This commit is contained in:
mtvpls
2026-04-23 12:05:51 +08:00
parent f1da246712
commit a0f9a0398b
6 changed files with 157 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/page.tsx
+79 -1
View File
@@ -7329,6 +7329,7 @@ const ThemeConfigComponent = ({
});
const [loginBackgroundImages, setLoginBackgroundImages] = useState<string[]>(['']);
const [registerBackgroundImages, setRegisterBackgroundImages] = useState<string[]>(['']);
const [homeBackgroundImages, setHomeBackgroundImages] = useState<string[]>(['']);
useEffect(() => {
if (config?.ThemeConfig) {
@@ -7363,6 +7364,16 @@ const ThemeConfigComponent = ({
} else {
setRegisterBackgroundImages(['']);
}
if (config.ThemeConfig.homeBackgroundImage) {
const urls = config.ThemeConfig.homeBackgroundImage
.split('\n')
.map((url) => url.trim())
.filter((url) => url !== '');
setHomeBackgroundImages(urls.length > 0 ? urls : ['']);
} else {
setHomeBackgroundImages(['']);
}
}
}, [config]);
@@ -7403,6 +7414,22 @@ const ThemeConfigComponent = ({
}
}
const validHomeUrls = homeBackgroundImages
.map((url) => url.trim())
.filter((url) => url !== '');
for (const url of validHomeUrls) {
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: {
@@ -7412,6 +7439,7 @@ const ThemeConfigComponent = ({
...themeSettings,
loginBackgroundImage: validLoginUrls.join('\n'),
registerBackgroundImage: validRegisterUrls.join('\n'),
homeBackgroundImage: validHomeUrls.join('\n'),
}),
});
@@ -7766,9 +7794,59 @@ const ThemeConfigComponent = ({
</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'>
{homeBackgroundImages.map((url, index) => (
<div key={index} className='flex gap-2'>
<input
type='text'
value={url}
onChange={(e) => {
const newImages = [...homeBackgroundImages];
newImages[index] = e.target.value;
setHomeBackgroundImages(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'
/>
{homeBackgroundImages.length > 1 && (
<button
type='button'
onClick={() => {
setHomeBackgroundImages(
homeBackgroundImages.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={() => setHomeBackgroundImages([...homeBackgroundImages, ''])}
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>
src/app/api/admin/theme/route.ts
+19
View File
@@ -36,6 +36,7 @@ export async function POST(request: NextRequest) {
cacheMinutes,
loginBackgroundImage,
registerBackgroundImage,
homeBackgroundImage,
progressThumbType,
progressThumbPresetId,
progressThumbCustomUrl,
@@ -47,6 +48,7 @@ export async function POST(request: NextRequest) {
cacheMinutes: number;
loginBackgroundImage?: string;
registerBackgroundImage?: string;
homeBackgroundImage?: string;
progressThumbType?: 'default' | 'preset' | 'custom';
progressThumbPresetId?: string;
progressThumbCustomUrl?: string;
@@ -96,6 +98,22 @@ export async function POST(request: NextRequest) {
}
}
if (homeBackgroundImage && homeBackgroundImage.trim() !== '') {
const urls = homeBackgroundImage
.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();
// 权限校验 - 使用v2用户系统
@@ -124,6 +142,7 @@ export async function POST(request: NextRequest) {
cacheVersion: cssChanged ? currentVersion + 1 : currentVersion,
loginBackgroundImage: loginBackgroundImage?.trim() || undefined,
registerBackgroundImage: registerBackgroundImage?.trim() || undefined,
homeBackgroundImage: homeBackgroundImage?.trim() || undefined,
progressThumbType: progressThumbType || 'default',
progressThumbPresetId: progressThumbPresetId?.trim() || undefined,
progressThumbCustomUrl: progressThumbCustomUrl?.trim() || undefined,
src/app/api/server-config/route.ts
+1
View File
@@ -61,6 +61,7 @@ export async function GET(request: NextRequest) {
DanmakuAutoLoadDefault: config.SiteConfig.DanmakuAutoLoadDefault !== false,
loginBackgroundImage: config.ThemeConfig?.loginBackgroundImage || '',
registerBackgroundImage: config.ThemeConfig?.registerBackgroundImage || '',
homeBackgroundImage: config.ThemeConfig?.homeBackgroundImage || '',
progressThumbType: config.ThemeConfig?.progressThumbType || 'default',
progressThumbPresetId: config.ThemeConfig?.progressThumbPresetId || '',
progressThumbCustomUrl: config.ThemeConfig?.progressThumbCustomUrl || '',
src/app/layout.tsx
+6 -3
View File
@@ -1,13 +1,13 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import type { Metadata, Viewport } from 'next';
import { cookies } from 'next/headers';
import { Inter } from 'next/font/google';
import { cookies } from 'next/headers';
import './globals.css';
import { getConfig } from '@/lib/config';
import { parseAuthInfo } from '@/lib/auth';
import { getConfig } from '@/lib/config';
import { getUserFeatureAccess } from '@/lib/permissions';
import { listEnabledSourceScripts } from '@/lib/source-script';
@@ -15,11 +15,11 @@ import { StartupCacheCleanup } from '../components/DanmakuCacheCleanup';
import { DownloadBubble } from '../components/DownloadBubble';
import { DownloadPanel } from '../components/DownloadPanel';
import { GlobalErrorIndicator } from '../components/GlobalErrorIndicator';
import RouteScrollReset from '../components/RouteScrollReset';
import { SiteProvider } from '../components/SiteProvider';
import { ThemeProvider } from '../components/ThemeProvider';
import { TokenRefreshManager } from '../components/TokenRefreshManager';
import TopProgressBar from '../components/TopProgressBar';
import RouteScrollReset from '../components/RouteScrollReset';
import ChatFloatingWindow from '../components/watch-room/ChatFloatingWindow';
import { WatchRoomProvider } from '../components/WatchRoomProvider';
import { DownloadProvider } from '../contexts/DownloadContext';
@@ -76,6 +76,7 @@ export default async function RootLayout({
let xiaoyaEnabled = false;
let loginBackgroundImage = '';
let registerBackgroundImage = '';
let homeBackgroundImage = '';
let progressThumbType = 'default';
let progressThumbPresetId = '';
let progressThumbCustomUrl = '';
@@ -139,6 +140,7 @@ export default async function RootLayout({
tmdbApiKey = config.SiteConfig.TMDBApiKey || '';
loginBackgroundImage = config.ThemeConfig?.loginBackgroundImage || '';
registerBackgroundImage = config.ThemeConfig?.registerBackgroundImage || '';
homeBackgroundImage = config.ThemeConfig?.homeBackgroundImage || '';
progressThumbType = config.ThemeConfig?.progressThumbType || 'default';
progressThumbPresetId = config.ThemeConfig?.progressThumbPresetId || '';
progressThumbCustomUrl = config.ThemeConfig?.progressThumbCustomUrl || '';
@@ -226,6 +228,7 @@ export default async function RootLayout({
(xiaoyaEnabled && userFeatureAccess.xiaoya),
LOGIN_BACKGROUND_IMAGE: loginBackgroundImage,
REGISTER_BACKGROUND_IMAGE: registerBackgroundImage,
HOME_BACKGROUND_IMAGE: homeBackgroundImage,
PROGRESS_THUMB_TYPE: progressThumbType,
PROGRESS_THUMB_PRESET_ID: progressThumbPresetId,
PROGRESS_THUMB_CUSTOM_URL: progressThumbCustomUrl,
src/components/PageLayout.tsx
+51 -2
View File
@@ -1,3 +1,7 @@
'use client';
import { useEffect, useState } from 'react';
import { BackButton } from './BackButton';
import MobileBottomNav from './MobileBottomNav';
import MobileHeader from './MobileHeader';
@@ -14,16 +18,61 @@ interface PageLayoutProps {
}
const PageLayout = ({ children, activePath = '/', hideNavigation = false }: PageLayoutProps) => {
const [backgroundImage, setBackgroundImage] = useState('');
const shouldShowSharedBackground = !hideNavigation && activePath !== '/play';
useEffect(() => {
if (typeof window === 'undefined' || !shouldShowSharedBackground) {
setBackgroundImage('');
return;
}
const homeBg = (
window as Window & {
RUNTIME_CONFIG?: {
HOME_BACKGROUND_IMAGE?: string;
};
}
).RUNTIME_CONFIG?.HOME_BACKGROUND_IMAGE;
if (!homeBg) {
setBackgroundImage('');
return;
}
const urls = homeBg
.split('\n')
.map((url: string) => url.trim())
.filter((url: string) => url !== '');
if (urls.length === 0) {
setBackgroundImage('');
return;
}
const randomIndex = Math.floor(Math.random() * urls.length);
setBackgroundImage(urls[randomIndex]);
}, [shouldShowSharedBackground]);
return (
<VersionCheckProvider>
<div className='w-full min-h-screen'>
<div className='relative w-full min-h-screen overflow-hidden'>
{shouldShowSharedBackground && backgroundImage && (
<>
<div
className='absolute inset-0 pointer-events-none bg-cover bg-center bg-no-repeat opacity-45'
style={{ backgroundImage: `url(${backgroundImage})` }}
/>
<div className='absolute inset-0 pointer-events-none bg-white/50 dark:bg-gray-950/50' />
</>
)}
{/* 移动端头部 */}
{!hideNavigation && (
<MobileHeader showBackButton={['/play', '/live'].includes(activePath)} />
)}
{/* 主要布局容器 */}
<div className='flex md:grid md:grid-cols-[auto_1fr] w-full min-h-screen md:min-h-auto'>
<div className='relative z-10 flex md:grid md:grid-cols-[auto_1fr] w-full min-h-screen md:min-h-auto'>
{/* 侧边栏 - 桌面端显示，移动端隐藏 */}
{!hideNavigation && (
<div className='hidden md:block'>
src/lib/admin.types.ts
+1
View File
@@ -126,6 +126,7 @@ export interface AdminConfig {
cacheVersion: number; // CSS版本号（用于缓存控制）
loginBackgroundImage?: string; // 登录界面背景图
registerBackgroundImage?: string; // 注册界面背景图
homeBackgroundImage?: string; // 首页背景图
// 进度条图标配置
progressThumbType?: 'default' | 'preset' | 'custom'; // 图标类型
progressThumbPresetId?: string; // 预制图标ID