修改广告组件使用实际图片文件

- 横向Banner使用 /public/banner.png
- 竖向广告使用 /public/mainpage.png
- 添加图片存在性检查，图片不存在时不显示广告
- 使用 Next.js Image 组件优化图片加载

现在只需要将对应的图片文件放到 public 目录下即可显示广告。

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/HorizontalBanner.tsx

@@ -1,13 +1,30 @@
 'use client';
 
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
 import { isAdEnabled, getAdLink } from '@/utils/adConfig';
 
 export default function HorizontalBanner() {
+  const [imageExists, setImageExists] = useState(false);
+
+  useEffect(() => {
+    // 检查图片是否存在
+    const img = new window.Image();
+    img.onload = () => setImageExists(true);
+    img.onerror = () => setImageExists(false);
+    img.src = '/banner.png';
+  }, []);
+
   // 如果广告未启用或已过期，不显示
   if (!isAdEnabled()) {
     return null;
   }
 
+  // 如果图片不存在，不显示
+  if (!imageExists) {
+    return null;
+  }
+
   return (
     <div className="w-full bg-gray-100">
       {/* 横向 Banner - 7:1 比例 */}
@@ -20,19 +37,13 @@ export default function HorizontalBanner() {
           aspectRatio: '7/1'
         }}
       >
-        {/* 占位内容 */}
-        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-          <div className="text-center">
-            <div className="text-gray-500 text-base sm:text-lg">广告横幅</div>
-            <div className="text-gray-400 text-xs sm:text-sm">7:1 横向广告</div>
-          </div>
-        </div>
-        
-        {/* 实际广告图片占位 */}
-        <img 
-          src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 100'%3E%3Crect fill='%23e5e7eb' width='700' height='100'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Arial' font-size='20' fill='%236b7280'%3E横幅广告占位图%3C/text%3E%3C/svg%3E"
+        {/* 实际广告图片 */}
+        <Image 
+          src="/banner.png"
           alt="横幅广告"
-          className="w-full h-full object-cover"
+          fill
+          className="object-cover"
+          priority
         />
       </a>
     </div>

components/VerticalAd.tsx

@@ -1,15 +1,25 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import Image from 'next/image';
 import { X } from 'lucide-react';
 import { isAdEnabled, getAdLink } from '@/utils/adConfig';
 
 export default function VerticalAd() {
   const [isVisible, setIsVisible] = useState(false);
+  const [imageExists, setImageExists] = useState(false);
+
+  useEffect(() => {
+    // 检查图片是否存在
+    const img = new window.Image();
+    img.onload = () => setImageExists(true);
+    img.onerror = () => setImageExists(false);
+    img.src = '/mainpage.png';
+  }, []);
 
   useEffect(() => {
     // 检查广告是否应该显示
-    if (!isAdEnabled()) {
+    if (!isAdEnabled() || !imageExists) {
       return;
     }
 
@@ -19,7 +29,7 @@ export default function VerticalAd() {
     }, 1000);
 
     return () => clearTimeout(timer);
-  }, []);
+  }, [imageExists]);
 
   const handleClose = () => {
     setIsVisible(false);
@@ -50,19 +60,13 @@ export default function VerticalAd() {
             aspectRatio: '3/5'
           }}
         >
-          {/* 占位内容 */}
-          <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-            <div className="text-center">
-              <div className="text-gray-500 text-lg mb-2">广告位</div>
-              <div className="text-gray-400 text-sm">3:5 竖向广告</div>
-            </div>
-          </div>
-          
-          {/* 实际广告图片占位 */}
-          <img 
-            src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 500'%3E%3Crect fill='%23e5e7eb' width='300' height='500'/%3E%3Ctext x='50%25' y='50%25' text-anchor='middle' dominant-baseline='middle' font-family='Arial' font-size='24' fill='%236b7280'%3E广告占位图%3C/text%3E%3C/svg%3E"
+          {/* 实际广告图片 */}
+          <Image 
+            src="/mainpage.png"
             alt="广告"
-            className="w-full h-full object-cover"
+            fill
+            className="object-cover"
+            priority
           />
         </a>
       </div>