泛化轮播图

app/components/news/body/FireNews/ImportantNews.tsx

@@ -3,11 +3,38 @@ import {FireNewsList} from "./FireNewsList";
 import { CarouselPreset } from "@/components/untils/CarouselPreset";
 
 export function ImportantNews() {
+    // 定义所有轮播图片路径
+    const carouselImages = [
+        "/images/carousel-1.jpg",
+        "/images/carousel-2.jpg",
+        "/images/carousel-3.jpg",
+        "/images/carousel-4.jpg",
+        "/images/carousel-5.jpg",
+        "/images/carousel-6.jpg",
+        "/images/carousel-7.jpg",
+        "/images/carousel-8.jpg",
+        "/images/carousel-9.jpg",
+    ];
+
+      // 转换为 slides 格式
+      const slides = carouselImages.map((imageUrl, index) => ({
+        key: `carousel-${index + 1}`,
+        content: (
+            <div 
+                className="w-full h-full"
+                style={{
+                    backgroundImage: `url(${imageUrl})`,
+                    backgroundSize: '100% 100%',
+                }}
+            />
+        ),
+    }));
+
     return(
     <div className="relative w-5/6 h-225 mx-auto overflow-hidden ">
         {/* 轮播背景图 - 确保有明确尺寸 */}
         <div className="absolute top-0 left-0 w-full h-225">
-            <CarouselDemo />
+            <CarouselPreset slides={slides}  showControls={false}  autoplayDelay={2000}/> 
         </div>
         
         {/* 固定的烽火要闻 */}

app/components/untils/CarouselPreset.tsx

@@ -17,14 +17,14 @@ type Slide = {
 }
 
 type CarouselPresetProps = {
-  slides: Slide[]
+  slides: Slide[]    //传入的轮播项
-  autoplayDelay?: number
+  autoplayDelay?: number   //自动轮播的间隔，默认为3000
-  showControls?: boolean
+  showControls?: boolean   //是否显示左右切换按钮
-  showIndicators?: boolean
+  showIndicators?: boolean  //是否显示底部的分页指示器
-  indicatorVariant?: "dot" | "pill"
+  indicatorVariant?: "dot" | "pill"  //分页指示器的样式，默认为"dot"，dot圆点，pill小胶囊
-  className?: string
+  className?: string    // 作用在最外层容器，用来定制整体尺寸/布局
-  contentClassName?: string
+  contentClassName?: string     //作用在内部的 CarouselContent 容器，可自定义内层排列方式（例如圆角、阴影等）
-  itemClassName?: string
+  itemClassName?: string      //作用在每个 CarouselItem 上，调整单个 slide 的额外样式（比如内边距、宽高）
 }
 
 export function CarouselPreset({