增加首页背景图设置

src/components/PageLayout.tsx

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