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

app/components/Carousel.tsx

@@ -1,41 +1,45 @@
-// 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,//主体
+  Carousel,
-  CarouselContent,//内容容器
+  CarouselContent,
-  CarouselItem,//单个轮播项
+  CarouselItem,
   CarouselNext,
   CarouselPrevious,
   type CarouselApi,
 } from "@/ui/carousel";
 
+const imageUrls = [
+  "/images/carousel-1.jpg",
+  "/images/carousel-2.jpg",
+  "/images/carousel-3.jpg",
+  "/images/carousel-4.jpg",
+  "/images/carousel-5.jpg",
+  "/images/carousel-6.jpg",
+];
 
 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 = 6; 
-
   React.useEffect(() => {
     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">
+    <div className="relative w-full h-full">
       <Carousel
-        opts={{
+        opts={{ loop: true }}
-          loop: true,
-        }}
         plugins={[
           Autoplay({
             delay: 3000,
@@ -43,6 +47,7 @@ export function CarouselDemo() {
           }),
         ]}
         setApi={setApi}
+        className="w-full h-full"
       >
         <CarouselContent className="h-full w-full">
           {Array.from({ length: totalSlides }).map((_, index) => (
@@ -75,8 +80,9 @@ export function CarouselDemo() {
             key={index}
             onClick={() => api?.scrollTo(index)}
             className={`h-2 w-2 rounded-full transition-colors ${
-              index === current ? "bg-black" : "bg-black/50"
+              index === current ? "bg-white" : "bg-white/50"
             }`}
+            aria-label={`Go to slide ${index + 1}`}
           />
         ))}
       </div>

app/components/body/AutoCarousel.tsx

@@ -0,0 +1,82 @@
+// 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,
+} from "@/ui/carousel";
+
+const imageUrls = [
+  "/images/carousel-1.jpg",
+  "/images/carousel-2.jpg",
+  "/images/carousel-3.jpg",
+  "/images/carousel-4.jpg",
+  "/images/carousel-5.jpg",
+  "/images/carousel-6.jpg",
+];
+
+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,//循环
+          align: "start",
+        }}
+        plugins={[
+          Autoplay({
+            delay: 3000, // 自动播放
+            stopOnInteraction: false,//不因为鼠标交互停止
+          }),
+        ]}
+        className="w-full"
+      >
+        <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',
+                }}
+              >
+                <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>
+          ))}
+        </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" />
+      </Carousel>
+    </div>
+  );
+}

app/components/body/FireNews/FireNewsList.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+interface NewsItem {
+  content: string;
+}
+
+export function FireNewsList() {
+  const newsItems: NewsItem[] = [
+    {
+      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
+    },
+    {
+      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
+    },
+    {
+      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
+    },
+    {
+      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
+    },
+    {
+      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
+    },
+    {
+      content: "记者从16日召开的海南省政府新闻发布会上获悉，2018年，海南旅游总收入达1,262万人次，支出达399.7亿元...",
+    },
+  ];
+
+  return (
+    <div className="bg-gray-200 p-4 rounded-lg h-full">
+      {/* 标题栏 */}
+      <div className="flex justify-between items-center mb-4">
+        <h2 className="text-xl font-bold text-gray-800">烽火要闻</h2>
+        <a className="text-blue-600 hover:text-blue-800 font-medium">
+          查看更多 {'>'}
+        </a>
+      </div>
+
+      {/* 新闻列表 */}
+      <div className="space-y-4">
+        {newsItems.map((item, index) => (
+          <div 
+            key={index} 
+            className="flex p-3 bg-white rounded-md shadow-sm hover:shadow-md transition-shadow duration-200"
+          >
+
+            {/* 内容部分 */}
+            <div className="flex-1 min-w-0">
+              <p className="text-gray-700 text-sm ">
+                {item.content}
+                <a 
+                  className="text-red-600 ml-1 font-medium hover:text-red-800"
+                >
+                  [MORE]
+                </a>
+              </p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

app/components/body/FireNews/fhjt.tsx

@@ -0,0 +1,39 @@
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhjtPage() {
+    return(
+    <div className=" w-full overflow-hidden flex justify-center">
+        {/* 轮播背景图 */}
+        <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
+            <CarouselDemo />
+        </div>
+        
+        <div className="w-100 h-full bg-white relative">
+			{/* 标题部分 */}
+			<div className="relative pt-6 pr-8">
+				<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火讲堂</h2>
+				{/* 蓝色装饰线 */}
+				<div className="h-3 bg-[#005d93]"></div>
+			</div>
+			{/* 列表 */}
+			<div className="mt-4 pr-8">
+
+				<div className="mb-5 justify-end flex">
+                        一等奖
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        二等奖
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        三等奖
+				</div>
+			</div>
+		</div>
+    </div>
+    )
+}

app/components/body/FireNews/fhrx.tsx

@@ -0,0 +1,39 @@
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhrxPage() {
+    return(
+    <div className=" w-full overflow-hidden flex justify-center">
+        {/* 轮播背景图 */}
+        <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
+            <CarouselDemo />
+        </div>
+        
+        <div className="w-100 h-full bg-white relative">
+			{/* 标题部分 */}
+			<div className="relative pt-6 pr-8">
+				<h2 className="text-right text-4xl font-bold text-[#005d93] mb-2">烽火热线</h2>
+				{/* 蓝色装饰线 */}
+				<div className="h-3 bg-[#005d93]"></div>
+			</div>
+			{/* 列表 */}
+			<div className="mt-4 pr-8">
+
+				<div className="mb-5 justify-end flex">
+                        信箱
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        问答
+				</div>
+
+				<div className="mb-5 justify-end flex">
+                        心灵
+				</div>
+			</div>
+		</div>
+    </div>
+    )
+}

app/components/body/FireNews/fhws.tsx

@@ -0,0 +1,38 @@
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhwsPage() {
+    return(
+    <div className=" w-full overflow-hidden flex justify-center">
+        <div className="w-100 h-full bg-white relative" >
+			{/* 标题部分 */}
+			<div className="relative pt-6 pr-8">
+				<h2 className=" text-4xl font-bold text-[#005d93] mb-2">烽火微视</h2>
+				{/* 蓝色装饰线 */}
+				<div className="h-3 bg-[#005d93]"></div>
+			</div>
+			{/* 列表 */}
+			<div className="mt-4 pr-8 ">
+
+				<div className="mb-5 justify-start flex">
+                        一
+				</div>
+
+				<div className="mb-5 justify-start flex">
+                        二
+				</div>
+
+				<div className="mb-5 justify-start flex">
+                        三
+				</div>
+			</div>
+		</div>
+        {/* 轮播背景图 */}
+        <div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
+            <CarouselDemo />
+        </div>
+    </div>
+    )
+}

app/components/body/FireNews/fhyw.tsx

@@ -0,0 +1,21 @@
+
+
+import { CarouselDemo } from "@/components/Carousel";
+import {FireNewsList} from "./FireNewsList";
+
+
+export function FhywPage() {
+    return(
+    <div className="relative w-full max-w-4xl mx-auto overflow-hidden aspect-square">
+        {/* 轮播背景图 */}
+        <div className="absolute inset-0 z-0">
+            <CarouselDemo />
+        </div>
+        
+        {/* 固定的烽火要闻 */}
+        <div className="absolute top-0 right-0 w-1/3 h-full p-1">
+            <FireNewsList />
+        </div>
+    </div>
+    )
+}

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

@@ -4,7 +4,7 @@ import {FireNewsList} from "./FireNewsList";
 
 export function FhjtPage() {
     return(
-    <div className=" w-full overflow-hidden flex justify-center h-200">
+    <div className=" w-full overflow-hidden flex justify-center h-200 mb-10 mt-10">
         <div className="relative">
 			{/* 轮播背景图 */}
 			<div className="w-200 absolute"  style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>

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

@@ -4,11 +4,14 @@ import {FireNewsList} from "./FireNewsList";
 
 export function FhrxPage() {
     return(
-    <div className=" w-full overflow-hidden flex justify-center h-200">
+    <div className=" w-full overflow-hidden flex justify-center h-200 mb-10">
-        {/* 轮播背景图 */}
+        <div className="relative">
-        <div className="w-200" style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
+			{/* 轮播背景图 */}
-            <CarouselDemo />
+			<div className="w-200 absolute"  style={{clipPath: 'polygon(0 0, calc(100% - 150px)-0.9%, calc(100% - 30px) 100%, 0 100%)',}}>
-        </div>
+				<CarouselDemo />
+			</div>
+			<div className='w-200 bg-white h-full'></div>
+		</div>
         
         <div className="w-100 h-full bg-white relative">
 			{/* 标题部分 */}

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

@@ -4,7 +4,7 @@ import {FireNewsList} from "./FireNewsList";
 
 export function FhwsPage() {
     return(
-    <div className=" w-full overflow-hidden flex justify-center h-200">
+    <div className=" w-full overflow-hidden flex justify-center h-200 mb-10">
         <div className="w-100 h-full bg-white relative" >
 			{/* 标题部分 */}
 			<div className="relative pt-6 pl-8">
@@ -28,10 +28,13 @@ export function FhwsPage() {
 				</div>
 			</div>
 		</div>
-        {/* 轮播背景图 */}
+        <div className="relative">
-        <div className="w-200" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
+			{/* 轮播背景图 */}
-            <CarouselDemo />
+			<div className="w-200 absolute" style={{clipPath: 'polygon(150px 0, 100% 0, calc(100% - 0px) 100%, 30px 100%)'}} >
-        </div>
+				<CarouselDemo />
+			</div>
+			<div className='w-200 bg-white h-full'></div>
+		</div>
     </div>
     )
 }

app/components/news/body/ImageGridSection.tsx

@@ -1,109 +1,102 @@
-import { CarouselDemo } from "@/components/Carousel";
+import { CarouselDemo } from '@/components/Carousel';
-const ImageGridSection = () => {
+import React from 'react';
 
-    const elements = [
+const LearnPage = () => {
-        "/images/carousel-1.jpg",
+    const newsList = [
-        <CarouselDemo />,
+        '中华人民共和国监察法',
-        "/images/carousel-2.jpg",
+        '2024年国办印发意见部门工作人员党听全国两...',
-        "/images/carousel-3.jpg"
+        '十四届全国人大二次会议闭幕贺词',
+        '7天人代会："小片段"折射民主"大全景"',
+        '全国政协十四届二次会议共收到提案5800多件',
+        '两会观察丨从两会八个高频词看中国',
+        '两会"清单"上新这些民生发展温度',
+        '"选择中国"——世界从中国两会读出心动机号',
+        '中国经济信心说丨新玛合信心从哪里来',
     ];
-     {/* 最外 左右两列间 内边 内容最大宽 水平居 微软雅黑
-        2 列+ 2 行 格子间距 固定宽高
-        */} 
 
-    const listItems = [
-        '新闻标题一：重要政策发布',
-        '新闻标题二：经济数据稳步回升',
-        '新闻标题三：科技创新成果显著',
-        '新闻标题四：民生工程持续推进',
-        '新闻标题五：国际交流合作深化'
-    ];
     return (
-        <div style={{
+        <div className="w-4/5 mx-auto px-4 py-6">
-            display: 'flex',
+            {/* 顶部 Logo */}
-            gap: '24px',
+            <div className="flex justify-start mb-4">
-            padding: '20px',
+                <h1 className="text-3xl font-bold text-red-600">学习进行时</h1>
-            maxWidth: '1200px',
+            </div>
-            margin: '0 auto',
-            fontFamily: 'Microsoft YaHei, sans-serif'
-        }}>
 
-            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 圆 防溢 拉伸填满
+            {/* 主内容区：固定高度，紧凑布局 */}
-            保持比例填充 消除底部空白*/}
+            <div className="flex flex-col lg:flex-row gap-4 h-[740px]">
-            <div style={{
+                {/* 左侧图片区 */}
-                display: 'grid',
+                <div className="lg:w-3/5 rounded-lg overflow-hidden">
-                gridTemplateColumns: '1fr 1fr',
+                    <div className="grid grid-cols-3 grid-rows-2 gap-3 h-full w-full">
-                gridTemplateRows: '1fr 1fr',
+                        {/* 上左：第一张图 */}
-                gap: '16px',
+                        <div className="row-span-1 col-span-1 rounded-lg shadow-sm overflow-hidden">
-                width: '600px',
-                height: '450px',
-                boxSizing: 'border-box'   // 确保padding和border不会增加元素的实际宽度和高度
-            }}>
-
-                {elements.map((element, index) => (
-                    <div
-                        key={index}
-                        style={{
-                            borderRadius: '8px',
-                            overflow: 'hidden',
-                            boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
-                            display: 'flex',
-                            alignItems: 'stretch' 
-                        }}
-                    >
-                        {typeof element === 'string' ? (
                             <img
-                                src={element}
+                                src="/images/carousel-1.jpg"
-                                alt={`图片 ${index + 1}`}
+                                alt="Image 1"
-                                style={{
+                                className="w-full h-full object-cover"
-                                    width: '100%',
-                                    height: '100%',
-                                    objectFit: 'cover',
-                                    display: 'block'
-                                }}
                             />
-                        ) : (
+                        </div>
-                            element //  占据剩余空间 最小宽度；与左侧高度对齐；垂直布局；内容在垂直方向均匀分布
+
-                            // 背景色、圆角、阴影、内边距 防撑大
+                        {/* 上右：轮播图 */}
-                        )}
+                        <div className="col-span-2 row-span-1 rounded-lg shadow-sm overflow-hidden">
+                            <CarouselDemo />
+                        </div>
+
+                        {/* 下三图 */}
+                        {[3, 4, 5].map((i) => (
+                            <div key={i} className="rounded-lg shadow-sm overflow-hidden">
+                                <img
+                                    src={`/images/carousel-${i}.jpg`}
+                                    alt={`Image ${i}`}
+                                    className="w-full h-full object-cover"
+                                />
+                            </div>
+                        ))}
                     </div>
-                ))}
+                </div>
-            </div>
+            
-            <div style={{
+
-                flex: 1,
+                {/* 右侧新闻列表 */}
-                minWidth: '300px',
+                <div className="lg:w-2/5 bg-white border border-gray-200 rounded-lg shadow-sm p-4 flex items-center">
-                height: '450px', 
+                    <ul className="space-y-8 w-full">
-                display: 'flex',
+                        {newsList.map((item, index) => (
-                flexDirection: 'column',
+                            <li
-                justifyContent: 'space-between', 
+                                key={index}
-                background: '#f9f9f9',
+                                className="flex items-start text-2xl text-[#7e2f2a] hover:text-red-600 cursor-pointer group"
-                borderRadius: '8px',
+                            >
-                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                                <span className="text-red-500 mr-2 mt-0.5">•</span>
-                padding: '16px',
+                                <span className="group-hover:underline">{item}</span>
-                boxSizing: 'border-box'
+                            </li>
-            }}>
+                        ))}
-                <ul style={{
+                    </ul>
-                    listStyle: 'none',
+                </div>
-                    padding: 0,
+                </div>
-                    flexGrow: 1, 
+                <div className="w-[1514px] h-[285px]    flex relative">
-                    overflowY: 'auto' // 当 内 容超出时启用滚动条 填满剩余 文间
+				<div className="w-[750px] h-[188px] left-0 mt-25 absolute" style={{ backgroundColor: '#DEDEDC' }}>
-                }}>
+					<div
-                    {listItems.map((item, index) => (
+						className="w-[169px] h-[240px]  absolute left-0 bottom-0 bg-cover bg-center"
-                        <li
+						style={{ backgroundImage: "url('/public/images/book1.png')"}}
-                            key={index}
+					></div>
-                            style={{
+					{/* 左边容器内容 */}
-                                marginBottom: '12px',
+					<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px]">
-                                color: '#333',
+						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight">
-                                fontSize: '16px'
+							习近平新时代中国特色社会
-                            }}
+							<br />
-                        >
+							主义思想专题数据库
-                            <span style={{ color: '#c00', marginRight: '8px' }}>•</span>
+						</p>
-                            {item}
+					</div>
-                        </li>
+				</div>
-                    ))}
+				<div className="w-[700px] h-[188px] mt-25 right-0 absolute" style={{ backgroundColor: '#DEDEDC' }}>
-                </ul>
+					<div
-            </div>
+						className="w-[140px] h-[240px] absolute left-0 bottom-0 bg-cover bg-center "
+						style={{ backgroundImage: "url('/public/images/book2.png')"}}
+					></div>
+					{/* 右边容器内容 */}
+					<div className="absolute left-[200px] top-1/2 transform -translate-y-1/2 w-[520px] ">
+						<p className="text-[#005d93] text-[32px] font-bold text-center leading-tight mr-25">习近平著作选读</p>
+					</div>
+				</div>			                        
+          </div>  
         </div>
     );
 };
-export default ImageGridSection;
+
+export default LearnPage;

app/components/news/header/TopNav.tsx

@@ -1,16 +1,11 @@
 import { Search } from 'lucide-react';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 interface MenuItem {
   label: string;
   key: string;
 }
 
-// 定义 TopNavProps 接口，描述组件的 props 类型
-// menuItems? 菜单项数组
-// activeKey: 当前激活的菜单项
-// onSearch: 搜索回调函数
-// onItemClick: 菜单点击回调函数
 interface TopNavProps {
   menuItems?: MenuItem[];
   activeKey?: string;
@@ -18,11 +13,6 @@ interface TopNavProps {
   onItemClick?: (key: string) => void;
 }
 
-//定义 TopNav 组件，类型为 React 函数组件，接收 TopNavProps 类型的 props
-//解构并设置 menuItems 默认值，如果父组件没有传入则使用默认的6个菜单项
-// activeKey: 当前激活的菜单项
-// onSearch: 搜索回调函数
-// onItemClick: 菜单点击回调函数
 export function TopNav({
   menuItems = [
     { label: '首页', key: 'home' },
@@ -32,35 +22,37 @@ export function TopNav({
     { label: '联系热线', key: 'hotline' },
     { label: '综合服务', key: 'service' },
   ],
-  activeKey: externalActiveKey, // 从外部传入的 activeKey
+  activeKey: externalActiveKey,
   onSearch,
   onItemClick,
 }: TopNavProps){
-  // 使用外部传入的 activeKey，如果没有则使用内部状态
-  // 创建内部状态 internalActiveKey，默认值为 'home'，用于内部管理激活状态
   const [internalActiveKey, setInternalActiveKey] = useState('home');
-  // 如果外部传入了 activeKey 则使用外部的，否则使用内部状态（支持受控和非受控模式）
   const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
-  // 创建搜索关键词状态，初始为空字符串
   const [searchKeyword, setSearchKeyword] = useState('');
-    // 处理搜索提交事件, 阻止默认表单提交行为，调用搜索回调函数
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [prevIndex, setPrevIndex] = useState(0);
+
+  // 监听激活项变化，更新索引和动画方向
+  useEffect(() => {
+    const currentIndex = menuItems.findIndex(item => item.key === currentActiveKey);
+    setPrevIndex(activeIndex);
+    setActiveIndex(currentIndex);
+  }, [currentActiveKey, menuItems, activeIndex]);
+
   const handleSearchSubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    onSearch?.(searchKeyword); // .? 可选链操作符，确保 onSearch 存在时才调用
+    onSearch?.(searchKeyword);
   };
 
-  // 定义菜单项点击处理函数，如果外部没有传入 activeKey 则更新内部状态，调用点击回调函数
   const handleItemClick = (item: MenuItem) => {
-    // 更新内部状态（如果使用内部状态）
     if (externalActiveKey === undefined) {
       setInternalActiveKey(item.key);
     }
-    // 调用外部回调函数
+    onItemClick?.(item.key);
-    onItemClick?.(item.key);  // .? 可选链操作符，确保 onItemClick 存在时才调用
   };
 
   return (
-    <div className="h-14 flex items-center justify-center px-8 bg-white">
+    <div className="h-20 flex items-center justify-center px-8 bg-white">
       {/* 搜索框与导航菜单组合 */}
       <div className="flex items-center space-x-4">
         {/* 搜索框 */}
@@ -71,7 +63,7 @@ export function TopNav({
               value={searchKeyword}
               onChange={(e) => setSearchKeyword(e.target.value)}
               placeholder="搜索..."
-              className="pl-10 pr-4 py-2 text-sm rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm"
+              className="pl-10 pr-4 py-2 text-sm border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64 transition-all duration-200 hover:shadow-sm"
             />
             <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
               <Search className="w-5 h-5" />
@@ -80,17 +72,33 @@ export function TopNav({
         </form>
 
         {/* 导航菜单 */}
-        <ul className="flex space-x-2">
+        <ul className="flex space-x-8 relative">
-          {menuItems.map((item) => {
+          {/* 滑动背景层 */}
-            const isActive = currentActiveKey === item.key; // 判断当前项是否激活
+          <div 
+            className="absolute inset-y-0 z-0 transition-all duration-500 ease-out"
+            style={{
+              left: `${activeIndex * (100 / menuItems.length)}%`,
+              width: `${100 / menuItems.length}%`,
+              clipPath: 'polygon(0% 0%, 80% 0%, 100% 100%, 20% 100%)', // 向左倾斜的平行四边形
+              background: 'linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)',
+              transform: `translateX(${(prevIndex - activeIndex) * 100}%)`,
+            }}
+          />
+          
+          {menuItems.map((item, index) => {
+            const isActive = currentActiveKey === item.key;
             return (
-              <li key={item.key}>
+              <li 
+                key={item.key} 
+                className="relative z-10"
+                style={{ width: `${100 / menuItems.length}%` }}
+              >
                 <button
                   onClick={() => handleItemClick(item)}
-                  className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
+                  className={`w-full h-full px-4 py-2 text-2xl transition-all duration-300 ${
                     isActive
-                      ? 'bg-blue-600 text-white shadow-md' // 激活状态样式
+                      ? 'text-white' // 激活状态文字颜色
-                      : 'text-gray-600 hover:bg-blue-100 hover:text-blue-700' // 非激活状态样式
+                      : 'text-gray-600 hover:text-black cursor-pointer' // 非激活状态样式
                   }`}
                 >
                   {item.label}

app/routes/news.tsx

@@ -12,6 +12,7 @@ import { FhjtPage } from "@/components/news/body/FireNews/fhjt";
 import { FhwsPage } from "@/components/news/body/FireNews/fhws";
 import { FhrxPage } from "@/components/news/body/FireNews/fhrx";
 import { AutoCarouselDemo } from "@/components/AutoCarousel";
+
 export function meta( ) {
   return [
     { title: "New React Router App" },