From bc2b2be3dba093ac7fba494ac5755d44fccbf292 Mon Sep 17 00:00:00 2001
From: qiuchenfan <2035024011@qq.com>
Date: Tue, 18 Nov 2025 20:45:54 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E6=9C=80=E7=BB=88?=
 =?UTF-8?q?=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/AutoCarousel.tsx          | 16 ++++++++++------
 app/components/Carousel.tsx              | 16 +++++++---------
 app/components/body/ImageGridSection.tsx |  2 +-
 app/routes/news.tsx                      |  5 ++++-
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/app/components/AutoCarousel.tsx b/app/components/AutoCarousel.tsx
index 8403c76..01a32b1 100644
--- a/app/components/AutoCarousel.tsx
+++ b/app/components/AutoCarousel.tsx
@@ -23,19 +23,19 @@ const imageUrls = [
 export function AutoCarouselDemo() {
   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%到透明 */}
       <Carousel
         opts={{
-          loop: true,
+          loop: true,//循环
           align: "start",
         }}
         plugins={[
           Autoplay({
-            delay: 3000,
-            stopOnInteraction: false,
+            delay: 3000, // 自动播放
+            stopOnInteraction: false,//不因为鼠标交互停止
           }),
         ]}
         className="w-full"
@@ -46,7 +46,11 @@ export function AutoCarouselDemo() {
               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={{
diff --git a/app/components/Carousel.tsx b/app/components/Carousel.tsx
index 0baf57b..c594c92 100755
--- a/app/components/Carousel.tsx
+++ b/app/components/Carousel.tsx
@@ -1,12 +1,12 @@
 // src/components/CarouselDemo.tsx
 import * as React from "react";
-import Autoplay from "embla-carousel-autoplay";
+import Autoplay from "embla-carousel-autoplay";//实现轮播图的自动播放功能
 
 import { Card, CardContent } from "@/ui/card";
 import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
+  Carousel,//主体
+  CarouselContent,//内容容器
+  CarouselItem,//单个轮播项
   CarouselNext,
   CarouselPrevious,
   type CarouselApi,
@@ -24,12 +24,11 @@ export function CarouselDemo() {
     if (!api) return;
 
     setCount(api.scrollSnapList().length);
-    setCurrent(api.selectedScrollSnap());
-
+    setCurrent(api.selectedScrollSnap());//获取当前选中的轮播项的索引
     api.on("select", () => {
       setCurrent(api.selectedScrollSnap());
     });
-  }, [api]);
+  }, [api]);//当api改变时，执行此函数 水平居中 循环 自动播放 回传状态
 
   return (
     <div className="relative w-full max-w-4xl mx-auto">
@@ -54,7 +53,7 @@ export function CarouselDemo() {
                     <div 
                     className="w-full h-full"
                     style={{
-                      backgroundImage: "url('/app/images/header.png')",
+                      backgroundImage: "url('/app/images/header.png')",//背景图片可修改
                       backgroundSize: '100% 100%',
                     }}
                     >
@@ -79,7 +78,6 @@ export function CarouselDemo() {
             className={`h-2 w-2 rounded-full transition-colors ${
               index === current ? "bg-black" : "bg-black/50"
             }`}
-            aria-label={`Go to slide ${index + 1}`}
           />
         ))}
       </div>
diff --git a/app/components/body/ImageGridSection.tsx b/app/components/body/ImageGridSection.tsx
index 6625297..813ca63 100644
--- a/app/components/body/ImageGridSection.tsx
+++ b/app/components/body/ImageGridSection.tsx
@@ -1,6 +1,6 @@
 import { CarouselDemo } from "@/components/Carousel";
 const ImageGridSection = () => {
-    // 替换为你自己的图片路径
+    
     const elements = [
         "/images/carousel-1.jpg",
         <CarouselDemo />,
diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index c7e1696..4a3a154 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -8,6 +8,7 @@ import NewsList from "@/components/list/NewsList";
 import ImageGridSection from "@/components/body/ImageGridSection";
 import { CarouselDemo } from "@/components/Carousel";
 import GrassrootsDynamics from "@/components/body/GrassrootsDynamics";
+import { AutoCarouselDemo } from "@/components/AutoCarousel";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -24,8 +25,10 @@ export default function Home() {
       <CarouselDemo />
       <NewsList />
       <ImageGridSection />
-      <Integrated />
+      <AutoCarouselDemo />
       <CultureBgPage />
+      <Integrated />
+    
     </div>
   );
 }

From 08b475e84d25ff50814d3cc7c1291dc12271ab3b Mon Sep 17 00:00:00 2001
From: qiuchenfan <2035024011@qq.com>
Date: Wed, 19 Nov 2025 08:22:08 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=9C=80=E7=BB=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/components/body/ImageGridSection.tsx | 24 +++++++++++++++---------
 app/routes/news.tsx                      |  4 ++--
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/components/body/ImageGridSection.tsx b/app/components/body/ImageGridSection.tsx
index 813ca63..c71f167 100644
--- a/app/components/body/ImageGridSection.tsx
+++ b/app/components/body/ImageGridSection.tsx
@@ -7,6 +7,10 @@ const ImageGridSection = () => {
         "/images/carousel-2.jpg",
         "/images/carousel-3.jpg"
     ];
+     {/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
+        2 列+ 2 行 格子间距 固定宽高
+        */} 
+
     const listItems = [
         '新闻标题一：重要政策发布',
         '新闻标题二：经济数据稳步回升',
@@ -23,8 +27,9 @@ const ImageGridSection = () => {
             margin: '0 auto',
             fontFamily: 'Microsoft YaHei, sans-serif'
         }}>
-
-            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 */}
+        
+            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
+            保持比例填充 消除底部空白*/}
             <div style={{
                 display: 'grid',
                 gridTemplateColumns: '1fr 1fr',
@@ -32,9 +37,9 @@ const ImageGridSection = () => {
                 gap: '16px',
                 width: '600px',
                 height: '450px',
-                border: '1px solid #ddd', // 可选，用于调试边界
                 boxSizing: 'border-box'   // 确保padding和border不会增加元素的实际宽度和高度
             }}>
+
                 {elements.map((element, index) => (
                     <div
                         key={index}
@@ -43,7 +48,7 @@ const ImageGridSection = () => {
                             overflow: 'hidden',
                             boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
                             display: 'flex',
-                            alignItems: 'stretch' // 确保子元素拉伸填充容器
+                            alignItems: 'stretch' 
                         }}
                     >
                         {typeof element === 'string' ? (
@@ -58,7 +63,8 @@ const ImageGridSection = () => {
                                 }}
                             />
                         ) : (
-                            element // 如果是 React 元素，则直接渲染
+                            element //  占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
+                            // 背景色、圆角、阴影、内边距 防撑大
                         )}
                     </div>
                 ))}
@@ -66,10 +72,10 @@ const ImageGridSection = () => {
             <div style={{
                 flex: 1,
                 minWidth: '300px',
-                height: '450px', // 设置与左侧相同的高度
+                height: '450px', 
                 display: 'flex',
                 flexDirection: 'column',
-                justifyContent: 'space-between', // 垂直方向均匀分布内容
+                justifyContent: 'space-between', 
                 background: '#f9f9f9',
                 borderRadius: '8px',
                 boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
@@ -79,8 +85,8 @@ const ImageGridSection = () => {
                 <ul style={{
                     listStyle: 'none',
                     padding: 0,
-                    flexGrow: 1, // 让列表尽可能填满可用空间
-                    overflowY: 'auto' // 当内容超出时启用滚动条
+                    flexGrow: 1, 
+                    overflowY: 'auto' // 当 内 容超出时启用滚动条 填满剩余 文间
                 }}>
                     {listItems.map((item, index) => (
                         <li
diff --git a/app/routes/news.tsx b/app/routes/news.tsx
index 9411938..76a8479 100755
--- a/app/routes/news.tsx
+++ b/app/routes/news.tsx
@@ -11,6 +11,7 @@ import { FhywPage } from "@/components/FireNews/fhyw";
 import { FhjtPage } from "@/components/FireNews/fhjt";
 import { FhwsPage } from "@/components/FireNews/fhws";
 import { FhrxPage } from "@/components/FireNews/fhrx";
+import { AutoCarouselDemo } from "@/components/AutoCarousel";
 export function meta( ) {
   return [
     { title: "New React Router App" },
@@ -28,13 +29,12 @@ export default function Home() {
       <NewsList />
       <ImageGridSection />
       <GrassrootsDynamics />
-      <GrassrootsDynamics />
       <FhjtPage/>
       <FhwsPage/>
       <FhrxPage />  
+      <AutoCarouselDemo />
       <CultureBgPage />
       <Integrated />
-      <Integrated />
     </div>
   );
 }