feat: 单排/双排列表模式切换

src/views/Community/components/DynamicNewsCard/EventScrollList.js

@@ -5,7 +5,10 @@ import React, { useRef } from 'react';
 import {
   Box,
   Flex,
+  Grid,
   IconButton,
+  Button,
+  ButtonGroup,
   Center,
   VStack,
   Spinner,
@@ -17,7 +20,7 @@ import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
 import PaginationControl from './PaginationControl';
 
 /**
- * 横向滚动事件列表组件
+ * 事件列表组件 - 支持两种展示模式
  * @param {Array} events - 当前页的事件列表（服务端已分页）
  * @param {Object} selectedEvent - 当前选中的事件
  * @param {Function} onEventSelect - 事件选择回调
@@ -26,6 +29,8 @@ import PaginationControl from './PaginationControl';
  * @param {number} totalPages - 总页数（由服务端返回）
  * @param {Function} onPageChange - 页码改变回调
  * @param {boolean} loading - 加载状态
+ * @param {string} mode - 展示模式：'carousel'（单排轮播）| 'grid'（双排网格）
+ * @param {Function} onModeChange - 模式切换回调
  */
 const EventScrollList = ({
   events,
@@ -35,7 +40,9 @@ const EventScrollList = ({
   currentPage,
   totalPages,
   onPageChange,
-  loading = false
+  loading = false,
+  mode = 'carousel',
+  onModeChange
 }) => {
   const scrollContainerRef = useRef(null);
 
@@ -52,16 +59,35 @@ const EventScrollList = ({
 
   return (
     <Box>
-      {/* 分页控制器 - 右上角相对定位 */}
-      {totalPages > 1 && (
-        <Flex justify="flex-end" p={0} m={0} mb={2}>
+      {/* 顶部控制栏：模式切换按钮（左）+ 分页控制器（右） */}
+      <Flex justify="space-between" align="center" mb={2}>
+        {/* 模式切换按钮 */}
+        <ButtonGroup size="sm" isAttached>
+          <Button
+            onClick={() => onModeChange('carousel')}
+            colorScheme="blue"
+            variant={mode === 'carousel' ? 'solid' : 'outline'}
+          >
+            单排
+          </Button>
+          <Button
+            onClick={() => onModeChange('grid')}
+            colorScheme="blue"
+            variant={mode === 'grid' ? 'solid' : 'outline'}
+          >
+            双排
+          </Button>
+        </ButtonGroup>
+
+        {/* 分页控制器 */}
+        {totalPages > 1 && (
           <PaginationControl
             currentPage={currentPage}
             totalPages={totalPages}
             onPageChange={onPageChange}
           />
-        </Flex>
-      )}
+        )}
+      </Flex>
 
       {/* 横向滚动区域 */}
       <Box position="relative">
@@ -122,17 +148,16 @@ const EventScrollList = ({
         />
       )}
 
-      {/* 横向滚动容器 */}
-      <Flex
+      {/* 事件卡片容器 */}
+      <Box
         ref={scrollContainerRef}
-        overflowX="auto"
+        overflowX={mode === 'carousel' ? 'auto' : 'hidden'}
         overflowY="hidden"
-        gap={4}
         pt={0}
         pb={4}
         px={2}
         position="relative"
-        css={{
+        css={mode === 'carousel' ? {
           '&::-webkit-scrollbar': {
             height: '8px',
           },
@@ -147,11 +172,9 @@ const EventScrollList = ({
           '&::-webkit-scrollbar-thumb:hover': {
             background: useColorModeValue('#555', '#718096'),
           },
-          // 平滑滚动
           scrollBehavior: 'smooth',
-          // 触摸设备优化
           WebkitOverflowScrolling: 'touch',
-        }}
+        } : {}}
       >
         {/* 加载遮罩 */}
         {loading && (
@@ -175,35 +198,72 @@ const EventScrollList = ({
           </Center>
         )}
 
-        {/* 事件卡片列表 */}
-        {events.map((event, index) => (
-          <Box
-            key={event.id}
-            minW="calc((100% - 64px) / 5)"
-            maxW="calc((100% - 64px) / 5)"
-            flexShrink={0}
+        {/* 模式1: 单排轮播模式 */}
+        {mode === 'carousel' && (
+          <Flex gap={4}>
+            {events.map((event, index) => (
+              <Box
+                key={event.id}
+                minW="calc((100% - 64px) / 5)"
+                maxW="calc((100% - 64px) / 5)"
+                flexShrink={0}
+              >
+                <DynamicNewsEventCard
+                  event={event}
+                  index={index}
+                  isFollowing={false}
+                  followerCount={event.follower_count || 0}
+                  isSelected={selectedEvent?.id === event.id}
+                  onEventClick={(clickedEvent) => {
+                    onEventSelect(clickedEvent);
+                  }}
+                  onTitleClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onEventSelect(event);
+                  }}
+                  onToggleFollow={() => {}}
+                  timelineStyle={getTimelineBoxStyle()}
+                  borderColor={borderColor}
+                />
+              </Box>
+            ))}
+          </Flex>
+        )}
+
+        {/* 模式2: 双排网格模式 */}
+        {mode === 'grid' && (
+          <Grid
+            templateRows="repeat(2, 1fr)"
+            templateColumns="repeat(5, 1fr)"
+            gap={4}
+            autoFlow="column"
           >
-            <DynamicNewsEventCard
-              event={event}
-              index={index}
-              isFollowing={false}
-              followerCount={event.follower_count || 0}
-              isSelected={selectedEvent?.id === event.id}
-              onEventClick={(clickedEvent) => {
-                onEventSelect(clickedEvent);
-              }}
-              onTitleClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                onEventSelect(event);
-              }}
-              onToggleFollow={() => {}}
-              timelineStyle={getTimelineBoxStyle()}
-              borderColor={borderColor}
-            />
-          </Box>
-        ))}
-      </Flex>
+            {events.map((event, index) => (
+              <Box key={event.id}>
+                <DynamicNewsEventCard
+                  event={event}
+                  index={index}
+                  isFollowing={false}
+                  followerCount={event.follower_count || 0}
+                  isSelected={selectedEvent?.id === event.id}
+                  onEventClick={(clickedEvent) => {
+                    onEventSelect(clickedEvent);
+                  }}
+                  onTitleClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onEventSelect(event);
+                  }}
+                  onToggleFollow={() => {}}
+                  timelineStyle={getTimelineBoxStyle()}
+                  borderColor={borderColor}
+                />
+              </Box>
+            ))}
+          </Grid>
+        )}
+      </Box>
       </Box>
     </Box>
   );