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

app/components/AutoCarousel.tsx

@@ -1,13 +1,22 @@
+// 引入 React 核心库，用于构建组件
 import * as React from "react";
+
+// 引入 Embla Carousel 的自动播放插件，实现轮播图自动切换
 import Autoplay from "embla-carousel-autoplay";
 
+// 引入自定义 UI 组件：Card 和 CardContent（通常用于内容容器封装）
 import { Card, CardContent } from "@/ui/card";
+
+// 引入自定义轮播组件及其核心子组件
+// 注意：这里没有使用 CarouselNext/Previous，说明该轮播为纯自动播放、无手动导航按钮
 import {
   Carousel,
   CarouselContent,
   CarouselItem,
 } from "@/ui/carousel";
 
+// 定义轮播图中要展示的图片资源路径数组
+// 包含轮播主图（carousel-*.jpg）以及额外的静态资源（如 book1.png、header.png 等）
 const imageUrls = [
   "/images/carousel-1.jpg",
   "/images/carousel-2.jpg",
@@ -15,49 +24,56 @@ const imageUrls = [
   "/images/carousel-4.jpg",
   "/images/carousel-5.jpg",
   "/images/carousel-6.jpg",
-  "/images/book1.png",
+  "/images/book1.png",      // 可能是书籍封面
-  "/images/header.png",
+  "/images/header.png",     // 可能是顶部 Banner 图
-  "/images/jcdt.png",
+  "/images/jcdt.png",       // 可能是“基层动态”等模块图标
 ];
 
+// 导出名为 AutoCarouselDemo 的函数式组件
 export function AutoCarouselDemo() {
   return (
+    // 外层容器：相对定位，水平居中，上下留有足够间距（mt-30 ≈ 120px, mb-20 ≈ 80px）
     <div className="relative w-full mx-auto mt-30 mb-20">
 
-      
+      {/* 轮播主组件 */}
       <Carousel
         opts={{
-          loop: true,
+          loop: true,           // 启用无限循环：最后一张后自动回到第一张
-          align: "start",
+          align: "start",       // 对齐方式设为“起始对齐”，确保首项紧贴左侧（适用于非全屏单图场景）
         }}
         plugins={[
+          // 配置自动播放插件：
           Autoplay({
-            delay: 3000,
+            delay: 3000,                // 每 3 秒自动切换一次
-            stopOnInteraction: false,
+            stopOnInteraction: false,   // 用户点击或拖拽后不停止自动播放（持续轮播）
           }),
         ]}
-        className="w-full"
+        className="w-full" // 轮播容器占满父级宽度
       >
+        {/* 轮播内容区域：添加 gap-4 实现卡片间 1rem（16px）间距 */}
         <CarouselContent className="flex gap-4">
+          {/* 遍历所有图片 URL，为每张图生成一个轮播项 */}
           {imageUrls.map((src, index) => (
             <CarouselItem
               key={index}
+              // 响应式宽度控制：
+              // - 默认（小屏）：每个项占 1/4 宽度（basis-1/4）
+              // - 中屏（md）：占 1/3
+              // - 大屏（lg）：回到 1/4，适合展示 4 列
               className="basis-1/4 md:basis-1/3 lg:basis-1/4 flex-shrink-0 relative"
             >
-              <div
+              {/* 卡片外层：添加内边距、悬停缩放动效、鼠标指针样式 */}
-                className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer"
+              <div className="p-1 transition-transform duration-500 hover:scale-105 cursor-pointer">
-                style={{
+                {/* 图片容器：固定高度 h-120（即 30rem = 480px），隐藏溢出内容 */}
-                  transform: 'scale(1)',
-                  transition: 'all 0.5s ease',
-                }}
-              >
                 <div className="overflow-hidden border-none h-120">
-                  <CardContent className="relative w-full h-full">
+                  {/* 使用 CardContent 包裹图片，确保与 UI 系统一致 */}
+                  <CardContent className="relative w-full h-full p-0"> {/* p-0 移除默认内边距 */}
+                    {/* 实际图片元素 */}
                     <img
                       src={src}
-                      alt={`Slide ${index + 1}`}
+                      alt={`Slide ${index + 1}`} // 无障碍访问：描述当前幻灯片
-                      className="w-full h-full object-cover"
+                      className="w-full h-full object-cover" // 宽高填满容器，保持比例裁剪
-                      loading="lazy"
+                      loading="lazy" // 懒加载：提升页面初始加载性能
                     />
                   </CardContent>
                 </div>
@@ -66,6 +82,8 @@ export function AutoCarouselDemo() {
           ))}
         </CarouselContent>
 
+        {/* 注：此处未渲染 CarouselPrevious / CarouselNext，说明不提供手动左右箭头 */}
+        {/* 如需添加，可在此处插入：<CarouselPrevious /> <CarouselNext /> */}
 
       </Carousel>
     </div>

app/components/Carousel.tsx

@@ -41,31 +41,19 @@ export function CarouselDemo({
   paginationPosition = 'right', // 默认右下角
   paginationStyle = 'dot',      // 默认圆形指示器
 }: CarouselDemoProps) {
-  // 存储 Embla 轮播实例的引用，用于控制滚动等操作
+  // 存储 Embla 轮播实例的引用 当前激活的幻灯片索引 总共的幻灯片数量 图片总数
   const [api, setApi] = React.useState<CarouselApi>();
-
-  // 当前激活的幻灯片索引（从 0 开始）
   const [current, setCurrent] = React.useState(0);
-
-  // 总共的幻灯片数量（由 Embla API 动态获取）
   const [count, setCount] = React.useState(0);
-
-  // 图片总数（用于渲染轮播项）
   const totalSlides = imageUrls.length;
 
-  // 副作用：监听 api 变化，初始化轮播状态并绑定 select 事件
+  // 监听 api ，初始化轮播状态并绑定 select 事件 获取幻灯片总数 设置当前选中的 snap 索引 用户手动滑动或自动播放时触发 更新当前激活项
   React.useEffect(() => {
-    if (!api) return; // 如果 api 尚未就绪，直接返回
+    if (!api) return; 
-
-    // 获取所有 snap 点的数量（即幻灯片总数）
     setCount(api.scrollSnapList().length);
-
-    // 设置当前选中的 snap 索引
     setCurrent(api.selectedScrollSnap());
-
-    // 监听轮播切换事件（用户手动滑动或自动播放时触发）
     api.on("select", () => {
-      setCurrent(api.selectedScrollSnap()); // 更新当前激活项
+      setCurrent(api.selectedScrollSnap()); 
     });
   }, [api]); // 仅当 api 发生变化时重新执行
 
@@ -77,32 +65,33 @@ export function CarouselDemo({
       {/* 轮播主容器 */}
       <Carousel
         opts={{
-          loop: true, // 启用循环播放（最后一张后回到第一张）
+          loop: true, 
         }}
         plugins={[
-          // 配置自动播放插件：每 3 秒切换一次，且用户交互时不暂停
           Autoplay({
             delay: 3000,
             stopOnInteraction: false,
           }),
         ]}
-        setApi={setApi} // 将 Embla 实例保存到 state 中
+        setApi={setApi} // 保存
-        className="w-full" // 占满容器
+        className="w-full"
       >
-        {/* 轮播内容区域 */}
+        {/* 
-        <CarouselContent className=" w-full -ml-0">
+        移除默认内边距
+        */}
+        <CarouselContent className=" w-full -ml-0 h-full">
           {/* 遍历图片数组，为每张图创建一个轮播项 */}
           {imageUrls.map((src, index) => (
             <CarouselItem
               key={index}
-              className="w-full  pl-0" // 移除默认内边距
+              className="w-full  pl-0" 
             >
-              {/* 内部包裹层：无内边距，占满 */}
+              {/* 内部包裹层：无内边距，占满
+              移除默认间距 
+              自动填充容器，保持比例裁剪*/}
               <div className="p-0 w-full">
-                {/* 使用 CardContent 包裹图片，移除默认间距 */}
                 <CardContent className=" p-0 w-full  m-0">
-                  {/* 图片元素：自动填充容器，保持比例裁剪 */}
+                  <div className="relative w-full aspect-video ">
-                  <div className="relative w-full aspect-video"> {/* 可选：设置固定宽高比 */}
                     <img
                       src={src}
                       alt={`Slide ${index + 1}`} // 无障碍访问描述

app/components/news/header/TopNav.tsx

@@ -61,7 +61,7 @@ export function TopNav({
     // 将组件宽度调整为1514px，并保持居中
     <div className="h-full w-full mx-auto flex items-center px-8 bg-white border-t-16 border-b-16 border-[#176cad]">
       {/* 搜索框与导航菜单组合 */}
-      <div className="flex items-center justify-start  gap-35 ml-45 ">
+      <div className="flex items-center justify-start gap-30 ml-45 ">
         {/* 导航菜单 */}
         <ul className="flex space-x-20 relative mr-10">
           {menuItems.map((item) => {