list更新

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,40 @@
+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>
+      <div onClick={() => url && window.open(url)} 
+      className="flex items-center justify-between  hover:text-blue-500 
+      cursor-pointer  w-96">
+        <h3 >{title}</h3>
+        <p >{time}</p>
+      </div>
+    </div>
+  );
+};
+
+// 使用新闻数据渲染列表
+const NewsList: React.FC = () => {
+  return (
+    <div>
+      <ul className="flex flex-col justify-center items-center h-screen">
+        {mockNewsData.map((news) => (
+          <NewsItem  title={news.title} time={news.time} url={news.url} />
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+
+
+export default NewsList;