Merge branch 'main' of http://113.45.67.59:3003/qiuchenfan/news

app/components/AutoCarousel.tsx

@@ -1,14 +1,13 @@
-// src/components/CarouselDemo.tsx
 import * as React from "react";
 import Autoplay from "embla-carousel-autoplay";
 
-import { Card, CardContent } from "@/ui/card";
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
   CarouselNext,
   CarouselPrevious,
+  type CarouselApi,
 } from "@/ui/carousel";
 
 const imageUrls = [
@@ -18,64 +17,86 @@ const imageUrls = [
   "/images/carousel-4.jpg",
   "/images/carousel-5.jpg",
   "/images/carousel-6.jpg",
+  "/images/carousel-7.jpg",
+  "/images/carousel-8.jpg",
+  "/images/carousel-9.jpg",
+  "/images/book1.png",
+  "/images/header.png",
+  "/images/jcdt.png",
 ];
 
 export function AutoCarouselDemo() {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const [current, setCurrent] = React.useState(0);
+  const totalSlides = imageUrls.length;
+
+  React.useEffect(() => {
+    if (!api) return;
+    setCurrent(api.selectedScrollSnap());
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  const getScaleByDistance = (index: number, current: number, total: number): number => {
+    const directDist = Math.abs(index - current);
+    const wrapDist = total - directDist;
+    const minDist = Math.min(directDist, wrapDist);
+    return Math.max(0.5, 1.4 - minDist * 0.15);
+  };
+
   return (
-    <div className="relative w-full  mx-auto overflow-hidden">
-      {/* 相对定位 宽度100% 水平居中 隐藏溢出 */}
-      <div className="absolute inset-y-0 left-0 w-16 bg-gradient-to-r from-black/70 via-transparent pointer-events-none z-10" />
-      <div className="absolute inset-y-0 right-0 w-16 bg-gradient-to-l from-black/70 via-transparent pointer-events-none z-10" />
-      {/* 绝对定位 上下与父对齐 水平左对齐 背景渐变从左 从黑70%到透明 */}
+    // 最外层：允许内容溢出（关键！）
+    <div className="relative w-full mx-auto px-4 py-12 overflow-visible">
       <Carousel
-        opts={{
-          loop: true,//循环
-          align: "start",
-        }}
+        opts={{ loop: true, align: "center" }}
         plugins={[
-          Autoplay({
-            delay: 3000, // 自动播放
-            stopOnInteraction: false,//不因为鼠标交互停止
-          }),
+          Autoplay({ delay: 3000, stopOnInteraction: false }),
         ]}
+        setApi={setApi}
         className="w-full"
+        // ⚠️ 关键：覆盖 Embla 默认的 overflow:hidden
+        style={{ overflow: 'visible' }}
       >
-        <CarouselContent className="flex gap-4">
-          {imageUrls.map((src, index) => (
-            <CarouselItem
-              key={index}
-              className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
-            >
-              {/* 基宽 中屏 大屏 防止收缩 相对定位 
-              内边距 过渡500ms 鼠标悬停时放大1.05倍 鼠标手型
-              隐藏溢出 移除边框 中等阴影
-              弹性布局 正方形 垂直居中 水平居中 内边距0 相对
-              */}
-              <div
-                className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
-                style={{
-                  transform: 'scale(1)',
-                  transition: 'all 0.5s ease',
-                }}
+        {/* 内容区域也要 visible */}
+        <CarouselContent className="py-6" style={{ overflow: 'visible' }}>
+          {imageUrls.map((src, index) => {
+            const scale = getScaleByDistance(index, current, totalSlides);
+            const isCurrent = scale > 1.2;
+
+            return (
+              <CarouselItem
+                key={index}
+                // 设置基础宽度比例，但不设高度
+                className="basis-1/3 sm:basis-1/4 md:basis-1/5 flex-shrink-0 flex justify-center"
+                // ⚠️ 关键：这里不加 transform！而是让子元素控制
+                style={{ overflow: 'visible' }}
               >
-                <Card className="overflow-hidden border-none shadow-lg">
-                  <CardContent className="flex aspect-square items-center justify-center p-0 relative">
-                    <img
-                      src={src}
-                      alt={`Slide ${index + 1}`}
-                      className="w-full h-full object-cover"
-                      loading="lazy" // 启用懒加载
-                    />
-                  </CardContent>
-                </Card>
-              </div>
-            </CarouselItem>
-          ))}
+                {/* 这个 div 是真正要缩放的整体卡片 */}
+                <div
+                  className="rounded-xl shadow-xl bg-white transition-all duration-300 ease-out w-full max-w-[180px]"
+                  style={{
+                    height: '240px', // 固定高宽比替代方案（更稳定）
+                    transform: `scale(${scale})`,
+                    transformOrigin: 'center bottom',
+                    zIndex: isCurrent ? 20 : 1,
+                    willChange: 'transform',
+                  }}
+                >
+                  <img
+                    src={src}
+                    alt={`Slide ${index + 1}`}
+                    className="w-full h-full object-cover rounded-xl"
+                    loading="lazy"
+                  />
+                </div>
+              </CarouselItem>
+            );
+          })}
         </CarouselContent>
 
-        {/* 左右箭头控制 */}
-        <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-20" />
-        <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-20" />
+        <CarouselPrevious className="absolute left-0 top-1/2 -translate-y-1/2 z-30" />
+        <CarouselNext className="absolute right-0 top-1/2 -translate-y-1/2 z-30" />
       </Carousel>
     </div>
   );

app/components/Carousel.tsx

@@ -24,7 +24,9 @@ export function CarouselDemo() {
   const [api, setApi] = React.useState<CarouselApi>();
   const [current, setCurrent] = React.useState(0);
   const [count, setCount] = React.useState(0);
-  const totalSlides = imageUrls.length; 
+  const totalSlides = imageUrls.length;
+  const [isDotPagination, setIsDotPagination] = React.useState(true); // 控制分页指示器类型
+
   React.useEffect(() => {
     if (!api) return;
 
@@ -53,18 +55,16 @@ export function CarouselDemo() {
           {Array.from({ length: totalSlides }).map((_, index) => (
             <CarouselItem key={index} className="w-full h-full pl-0">
               <div className="p-0 w-full h-full">
-
-                  <CardContent className="flex aspect-square items-center justify-center p-0 w-full h-full m-0">
-                    <div 
+                <CardContent className="flex aspect-square items-center justify-center p-0 w-full h-full m-0">
+                  <div 
                     className="w-full h-full"
                     style={{
                       backgroundImage: "url('/public/images/header.png')",//背景图片可修改
                       backgroundSize: '100% 100%',
                     }}
-                    >
-                    </div>
-                  </CardContent>
-
+                  >
+                  </div>
+                </CardContent>
               </div>
             </CarouselItem>
           ))}
@@ -79,9 +79,9 @@ export function CarouselDemo() {
           <button
             key={index}
             onClick={() => api?.scrollTo(index)}
-            className={`h-2 w-2 rounded-full transition-colors ${
-              index === current ? "bg-white" : "bg-white/50"
-            }`}
+            className={`transition-colors ${
+              isDotPagination ? "h-2 w-2 rounded-full" : "h-2 w-8 rounded"
+            } ${index === current ? "bg-white" : "bg-white/50"}`}
             aria-label={`Go to slide ${index + 1}`}
           />
         ))}