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

app/components/Carousel.tsx

@@ -0,0 +1,92 @@
+// 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 = [
+
+  "/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; 
+
+  React.useEffect(() => {
+    if (!api) return;
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap());
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap());
+    });
+  }, [api]);
+
+  return (
+    <div className="relative w-full max-w-xs">
+      <Carousel
+        opts={{
+          loop: true,
+        }}
+        plugins={[
+          Autoplay({
+            delay: 3000,
+            stopOnInteraction: false, 
+          }),
+        ]}
+        setApi={setApi}
+        className="w-full"
+      >
+        <CarouselContent>
+          {imageUrls.map((src, index) => (
+            <CarouselItem key={index}>
+              <div className="p-1">
+                <Card>
+                  <CardContent className="flex aspect-square items-center justify-center p-6">
+                     <img
+                      src={src}
+                      alt={`Slide ${index + 1}`}
+                      className="w-full h-full object-cover"
+                    />
+                  </CardContent>
+                </Card>
+              </div>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+        <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-10" />
+        <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-10" />
+      </Carousel>
+
+      {/* 分页指示器 - 右下角 */}
+      <div className="absolute bottom-4 right-4 flex gap-2 z-10">
+        {Array.from({ length: count }).map((_, index) => (
+          <button
+            key={index}
+            onClick={() => api?.scrollTo(index)}
+            className={`h-2 w-2 rounded-full transition-colors ${
+              index === current ? "bg-black" : "bg-black/50"
+            }`}
+            aria-label={`Go to slide ${index + 1}`}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

app/components/body/ImageGridSection.tsx

@@ -0,0 +1,103 @@
+import { CarouselDemo } from "@/components/Carousel";
+const ImageGridSection = () => {
+    // 替换为你自己的图片路径
+    const elements = [
+        "/images/carousel-1.jpg",
+        <CarouselDemo />,
+        "/images/carousel-2.jpg",
+        "/images/carousel-3.jpg"
+    ];
+    const listItems = [
+        '新闻标题一：重要政策发布',
+        '新闻标题二：经济数据稳步回升',
+        '新闻标题三：科技创新成果显著',
+        '新闻标题四：民生工程持续推进',
+        '新闻标题五：国际交流合作深化'
+    ];
+    return (
+        <div style={{
+            display: 'flex',
+            gap: '24px',
+            padding: '20px',
+            maxWidth: '1200px',
+            margin: '0 auto',
+            fontFamily: 'Microsoft YaHei, sans-serif'
+        }}>
+
+            {/* 左侧：3张图片 + 1个轮播图 2x2 网格 */}
+            <div style={{
+                display: 'grid',
+                gridTemplateColumns: '1fr 1fr',
+                gridTemplateRows: '1fr 1fr',
+                gap: '16px',
+                width: '600px',
+                height: '450px',
+                border: '1px solid #ddd', // 可选，用于调试边界
+                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}
+                                alt={`图片 ${index + 1}`}
+                                style={{
+                                    width: '100%',
+                                    height: '100%',
+                                    objectFit: 'cover',
+                                    display: 'block'
+                                }}
+                            />
+                        ) : (
+                            element // 如果是 React 元素，则直接渲染
+                        )}
+                    </div>
+                ))}
+            </div>
+            <div style={{
+                flex: 1,
+                minWidth: '300px',
+                height: '450px', // 设置与左侧相同的高度
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between', // 垂直方向均匀分布内容
+                background: '#f9f9f9',
+                borderRadius: '8px',
+                boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                padding: '16px',
+                boxSizing: 'border-box'
+            }}>
+                <ul style={{
+                    listStyle: 'none',
+                    padding: 0,
+                    flexGrow: 1, // 让列表尽可能填满可用空间
+                    overflowY: 'auto' // 当内容超出时启用滚动条
+                }}>
+                    {listItems.map((item, index) => (
+                        <li
+                            key={index}
+                            style={{
+                                marginBottom: '12px',
+                                color: '#333',
+                                fontSize: '16px'
+                            }}
+                        >
+                            <span style={{ color: '#c00', marginRight: '8px' }}>•</span>
+                            {item}
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    );
+};
+export default ImageGridSection;

app/components/header/Header.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+export function Header(){
+    const [currentTime, setCurrentTime] = useState(new Date());
+
+    useEffect(() => {
+        // setInterval是 JavaScript 中的一个全局函数，用于重复执行代码
+        const timer = setInterval(() => {
+            setCurrentTime(new Date());
+        }, 1000); // 每秒更新一次
+
+        // 清理定时器
+        return () => clearInterval(timer);// 只在组件卸载时清理定时器
+    }, []); // 只在组件首次挂载时设置定时器
+
+    return (
+        <div 
+            className="relative w-[1280px] h-[704px] bg-cover bg-center left-1/2 transform -translate-x-1/2"
+            style={{ backgroundImage: "url('/app/images/header.png')" }} 
+        >
+            {/* 时间显示  只显示日期: "2025/3/15"*/}
+            <div className="absolute top-4 right-4 mr-40">
+                <div>
+                    {currentTime.toLocaleDateString('zh-CN')} 
+                </div>
+            </div>
+            <div className="absolute top-4 right-4 mr-20"> 
+                <h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('登录')}>登录</h2>
+            </div>
+            <div className="absolute top-4 right-4 mr-5"> 
+                <h2 className="text-lg font-bold cursor-pointer" onClick={() => console.log('注册')}>注册</h2>
+            </div>
+        </div>
+    )
+}

app/components/header/TopNav.tsx

@@ -0,0 +1,105 @@
+import { Search } from 'lucide-react';
+import React, { useState } from 'react';
+
+interface MenuItem {
+  label: string;
+  key: string;
+}
+
+// 定义 TopNavProps 接口，描述组件的 props 类型
+// menuItems? 菜单项数组
+// activeKey: 当前激活的菜单项
+// onSearch: 搜索回调函数
+// onItemClick: 菜单点击回调函数
+interface TopNavProps {
+  menuItems?: MenuItem[];
+  activeKey?: string;
+  onSearch?: (keyword: string) => void;
+  onItemClick?: (key: string) => void;
+}
+
+//定义 TopNav 组件，类型为 React 函数组件，接收 TopNavProps 类型的 props
+//解构并设置 menuItems 默认值，如果父组件没有传入则使用默认的6个菜单项
+// activeKey: 当前激活的菜单项
+// onSearch: 搜索回调函数
+// onItemClick: 菜单点击回调函数
+export function TopNav({
+  menuItems = [
+    { label: '首页', key: 'home' },
+    { label: '烽火动态', key: 'news' },
+    { label: '烽火铸魂', key: 'soul' },
+    { label: '烽火训练', key: 'training' },
+    { label: '联系热线', key: 'hotline' },
+    { label: '综合服务', key: 'service' },
+  ],
+  activeKey: externalActiveKey, // 从外部传入的 activeKey
+  onSearch,
+  onItemClick,
+}: TopNavProps){
+  // 使用外部传入的 activeKey，如果没有则使用内部状态
+  // 创建内部状态 internalActiveKey，默认值为 'home'，用于内部管理激活状态
+  const [internalActiveKey, setInternalActiveKey] = useState('home');
+  // 如果外部传入了 activeKey 则使用外部的，否则使用内部状态（支持受控和非受控模式）
+  const currentActiveKey = externalActiveKey !== undefined ? externalActiveKey : internalActiveKey;
+  // 创建搜索关键词状态，初始为空字符串
+  const [searchKeyword, setSearchKeyword] = useState('');
+    // 处理搜索提交事件, 阻止默认表单提交行为，调用搜索回调函数
+  const handleSearchSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onSearch?.(searchKeyword); // .? 可选链操作符，确保 onSearch 存在时才调用
+  };
+
+  // 定义菜单项点击处理函数，如果外部没有传入 activeKey 则更新内部状态，调用点击回调函数
+  const handleItemClick = (item: MenuItem) => {
+    // 更新内部状态（如果使用内部状态）
+    if (externalActiveKey === undefined) {
+      setInternalActiveKey(item.key);
+    }
+    // 调用外部回调函数
+    onItemClick?.(item.key);  // .? 可选链操作符，确保 onItemClick 存在时才调用
+  };
+
+  return (
+    <div className="h-14 flex items-center justify-center px-8 bg-white">
+      {/* 搜索框与导航菜单组合 */}
+      <div className="flex items-center space-x-4">
+        {/* 搜索框 */}
+        <form onSubmit={handleSearchSubmit} className="relative">
+          <div className="relative">
+            <input
+              type="text"
+              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"
+            />
+            <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+              <Search className="w-5 h-5" />
+            </span>
+          </div>
+        </form>
+        
+        {/* 导航菜单 */}
+        <ul className="flex space-x-2">
+          {menuItems.map((item) => {
+            const isActive = currentActiveKey === item.key; // 判断当前项是否激活
+            return (
+              <li key={item.key}>
+                <button
+                  onClick={() => handleItemClick(item)}
+                  className={`px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 ${
+                    isActive
+                      ? 'bg-blue-600 text-white shadow-md' // 激活状态样式
+                      : 'text-gray-600 hover:bg-blue-100 hover:text-blue-700' // 非激活状态样式
+                  }`}
+                >
+                  {item.label}
+                </button>
+              </li>
+            );
+          })}
+        </ul>
+      </div>
+    </div>
+  );
+};

app/components/list/NewsData.tsx

@@ -0,0 +1,29 @@
+export interface News {
+  id: string;
+  type: string;
+  title: string;
+  time: string;
+  url?: string;
+}  
+
+// 导出生成的模拟新闻数据
+export const NewsData = (): News[] => {
+  return [
+    { id: "news-1", type: "科技", title: "人工智能技术助力医疗诊断", time: "2023-11-01", url: "https://www.baidu.com" },
+    { id: "news-2", type: "科技", title: "全球气候变化峰会达成新协议", time: "2023-11-02", url: "https://www.baidu.com" },
+    { id: "news-3", type: "科技", title: "新能源汽车市场持续增长", time: "2023-11-03", url: "https://www.baidu.com" },
+    { id: "news-4", type: "科技", title: "量子计算研究取得突破性进展", time: "2023-11-04", url: "https://www.baidu.com" },
+    { id: "news-5", type: "科技", title: "国际空间站完成新一轮科学实验", time: "2023-11-05", url: "https://www.baidu.com" },
+    { id: "news-6", type: "科技", title: "数字货币监管政策逐步完善", time: "2023-11-06", url: "https://www.baidu.com" },
+    { id: "news-7", type: "科技", title: "5G网络覆盖范围进一步扩大", time: "2023-11-07", url: "https://www.baidu.com" },  
+    { id: "news-8", type: "科技", title: "教育公平问题引发社会关注", time: "2023-11-08", url: "https://www.baidu.com" },
+    { id: "news-9", type: "科技", title: "电影《星际穿越》重映引发热潮", time: "2023-11-09", url: "https://www.baidu.com" }
+
+
+
+    
+  ];
+};
+
+// 默认导出模拟新闻数据
+export const mockNewsData = NewsData();

app/components/list/NewsList.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { mockNewsData } from './NewsData'; // 导入新闻数据
+
+interface NewsProps {
+  title?: string;
+  description?: string;
+  time?: string;
+  type?: string;
+  url?: string;
+}
+
+const NewsItem: React.FC<NewsProps> = ({ title = '', time = '', url = '' }) => {
+  return (
+    <div className="mb-4">
+      <div
+        onClick={() => url && window.open(url)}
+        className="flex items-center justify-between hover:text-blue-600 cursor-pointer transition duration-300 ease-in-out"
+      >
+        <h3 className="text-lg font-semibold text-gray-800">{title}</h3>
+        <p className="text-sm text-gray-500">{time}</p>
+      </div>
+    </div>
+  );
+};
+
+// 使用新闻数据渲染列表
+const NewsList: React.FC = () => {
+  return (
+    <div className="bg-gray-100 p-6 rounded-lg shadow-md">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        {/* 科技新闻 */}
+        <div className="bg-white p-6 rounded-lg shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <p className="text-xl font-bold text-gray-900">科技新闻</p>
+            <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
+              更多科技新闻
+            </button>
+          </div>
+          <ul className="space-y-4">
+            {mockNewsData.map((news, index) => (
+              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
+            ))}
+          </ul>
+        </div>
+
+        {/* 社会新闻 */}
+        <div className="bg-white p-6 rounded-lg shadow-sm">
+          <div className="flex items-center justify-between mb-4">
+            <p className="text-xl font-bold text-gray-900">社会新闻</p>
+            <button className="bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-md transition duration-300 ease-in-out">
+              更多社会新闻
+            </button>
+          </div>
+          <ul className="space-y-4">
+            {mockNewsData.map((news, index) => (
+              <NewsItem key={index} title={news.title} time={news.time} url={news.url} />
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewsList;

app/components/untils/Carousel.tsx

@@ -1,32 +0,0 @@
-import * as React from "react"
-
-import { Card, CardContent } from "@/components/ui/card"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-
-export function CarouselDemo() {
-  return (
-    <Carousel className="w-full max-w-xs">
-      <CarouselContent>
-        {Array.from({ length: 5 }).map((_, index) => (
-          <CarouselItem key={index}>
-            <div className="p-1">
-              <Card>
-                <CardContent className="flex aspect-square items-center justify-center p-6">
-                  <span className="text-4xl font-semibold">{index + 1}</span>
-                </CardContent>
-              </Card>
-            </div>
-          </CarouselItem>
-        ))}
-      </CarouselContent>
-      <CarouselPrevious />
-      <CarouselNext />
-    </Carousel>
-  )
-}

app/routes/news.tsx

@@ -1,8 +1,12 @@
-import { Carousel } from "@/components/ui/carousel";
+import { CarouselDemo } from "@/components/Carousel";
 import type { Route } from "./+types/news";
 import Integrated from "@/components/news/body/Integrated";
 import CultureBgPage from "@/components/news/body/Culturebg";
-export function meta({}: Route.MetaArgs) {
+import {Header} from "@/components/header/Header";
+import {TopNav} from "@/components/header/TopNav";
+import NewsList from "@/components/list/NewsList";
+import ImageGridSection from "@/components/body/ImageGridSection";
+export function meta( ) {
   return [
     { title: "New React Router App" },
     { name: "description", content: "Welcome to React Router!" },
@@ -10,9 +14,15 @@ export function meta({}: Route.MetaArgs) {
 }
 
 export default function Home() {
+  
   return (
     <div>
-     
+      <Header />
+      <TopNav />
+      <NewsList />
+      <ImageGridSection />
+      <Integrated />
+      <CultureBgPage />
     </div>
   );
 }

app/ui/carousel.tsx

@@ -5,7 +5,7 @@ import useEmblaCarousel, {
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { Button } from "@/ui/button"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>

package.json

@@ -20,6 +20,7 @@
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
+    "embla-carousel-autoplay": "^8.6.0",
     "embla-carousel-react": "^8.6.0",
     "immer": "^10.2.0",
     "isbot": "^5.1.31",

pnpm-lock.yaml

@@ -41,6 +41,9 @@ importers:
       dayjs:
         specifier: ^1.11.19
         version: 1.11.19
+      embla-carousel-autoplay:
+        specifier: ^8.6.0
+        version: 8.6.0(embla-carousel@8.6.0)
       embla-carousel-react:
         specifier: ^8.6.0
         version: 8.6.0(react@19.2.0)
@@ -1478,6 +1481,11 @@ packages:
   electron-to-chromium@1.5.255:
     resolution: {integrity: sha512-Z9oIp4HrFF/cZkDPMpz2XSuVpc1THDpT4dlmATFlJUIBVCy9Vap5/rIXsASP1CscBacBqhabwh8vLctqBwEerQ==}
 
+  embla-carousel-autoplay@8.6.0:
+    resolution: {integrity: sha512-OBu5G3nwaSXkZCo1A6LTaFMZ8EpkYbwIaH+bPqdBnDGQ2fh4+NbzjXjs2SktoPNKCtflfVMc75njaDHOYXcrsA==}
+    peerDependencies:
+      embla-carousel: 8.6.0
+
   embla-carousel-react@8.6.0:
     resolution: {integrity: sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA==}
     peerDependencies:
@@ -4211,6 +4219,10 @@ snapshots:
 
   electron-to-chromium@1.5.255: {}
 
+  embla-carousel-autoplay@8.6.0(embla-carousel@8.6.0):
+    dependencies:
+      embla-carousel: 8.6.0
+
   embla-carousel-react@8.6.0(react@19.2.0):
     dependencies:
       embla-carousel: 8.6.0