From b643081c0bdd611687273a34cb6049e962cc8462 Mon Sep 17 00:00:00 2001
From: zihanjian <zihan.jian@outlook.com>
Date: Fri, 4 Jul 2025 17:51:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=B9=BF=E5=91=8A=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BD=BF=E7=94=A8=E5=AE=9E=E9=99=85=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 横向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 | 35 ++++++++++++++++++++++-----------
 components/VerticalAd.tsx       | 32 +++++++++++++++++-------------
 2 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/components/HorizontalBanner.tsx b/components/HorizontalBanner.tsx
index 6a0ed73..6364ae7 100644
--- a/components/HorizontalBanner.tsx
+++ b/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>
diff --git a/components/VerticalAd.tsx b/components/VerticalAd.tsx
index 4285387..a2f6d5b 100644
--- a/components/VerticalAd.tsx
+++ b/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>