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

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "kiroAgent.configureMCP": "Disabled"
+}

app/components/Carousel.tsx

@@ -28,16 +28,16 @@ const imageUrls = [
 // 定义组件接收的 props 接口，提供类型安全
 export interface CarouselDemoProps {
   // 分页指示器位置：'left' 表示左下角，'right' 表示右下角，默认为 'right'
-  paginationPosition?: 'left' | 'right';
+  paginationPosition?: "left" | "right";
 
   // 分页指示器样式：'dot' 为圆形小点，'bar' 为横向小条，默认为 'dot'
-  paginationStyle?: 'dot' | 'bar';
+  paginationStyle?: "dot" | "bar";
 }
 
 // 导出 CarouselDemo 组件，接收两个可选 props，并设置默认值
 export function CarouselDemo({
-  paginationPosition = 'right', // 默认右下角
+  paginationPosition = "right", // 默认右下角
-  paginationStyle = 'dot',      // 默认圆形指示器
+  paginationStyle = "dot", // 默认圆形指示器
 }: CarouselDemoProps) {
   //  轮播实例的引用 当前激活的幻灯片索引 总共的幻灯片数量 图片总数
   const [api, setApi] = React.useState<CarouselApi>();
@@ -59,7 +59,6 @@ export function CarouselDemo({
   return (
     // 外层容器：相对定位，占满父容器宽高
     <div className="relative w-full h-full">
-
       {/* 轮播主容器 */}
       <Carousel
         opts={{
@@ -80,10 +79,7 @@ export function CarouselDemo({
         <CarouselContent className=" w-full -ml-0 h-full">
           {/* 遍历图片数组，为每张图创建一个轮播项 */}
           {imageUrls.map((src, index) => (
-            <CarouselItem
+            <CarouselItem key={index} className="w-full  pl-0">
-              key={index}
-              className="w-full  pl-0" 
-            >
               {/* 内部包裹层：无内边距，占满
               移除默认间距 
               自动填充容器，保持比例裁剪*/}
@@ -112,7 +108,8 @@ export function CarouselDemo({
 
       {/* 分页指示器容器：绝对定位在底部 */}
       <div
-        className={`absolute bottom-4 ${paginationPosition === 'left' ? 'left-4' : 'right-4' // 根据 prop 控制左右位置
+        className={`absolute bottom-4 ${
+          paginationPosition === "left" ? "left-4" : "right-4" // 根据 prop 控制左右位置
         } flex gap-2 z-10`} // 水平排列，间距 0.5rem，置于轮播图上方
       >
         {/* 动态生成指示器按钮 */}
@@ -122,12 +119,13 @@ export function CarouselDemo({
             onClick={() => api?.scrollTo(index)} // 点击跳转到对应幻灯片
             className={`transition-colors ${
               // 根据 paginationStyle 决定形状
-              paginationStyle === 'dot'
+              paginationStyle === "dot"
-                ? 'h-2 w-2 rounded-full'   // 圆形：宽高相等 + 全圆角
+                ? "h-2 w-2 rounded-full" // 圆形：宽高相等 + 全圆角
-                : 'h-1 w-6 rounded'         // 块状
+                : "h-1 w-6 rounded" // 块状
-              } ${index === current
+            } ${
-                ? 'bg-white'       // 当前项为纯白色
+              index === current
-                : 'bg-white/50'    // 非当前项为半透明白色
+                ? "bg-white" // 当前项为纯白色
+                : "bg-white/50" // 非当前项为半透明白色
             }`}
             aria-label={`Go to slide ${index + 1}`} // 无障碍支持
           />

app/store/newsStore.ts

@@ -0,0 +1,15 @@
+import { create } from "zustand";
+
+
+
+//此页面是为了使用zustand进行数据管理
+
+type NewsStore = {
+  news: any;
+  setNews: (news: any) => void;
+};
+
+const newsStore = create<NewsStore>((set,get) => ({
+  news: [],
+  setNews: (news: any) => set({ news }),
+}));