feat: feat: 优化事件卡片 UI 和交互体验

修复 useColorModeValue 调用位置（提升到顶层）
优化分页和滚动逻辑
动态 indicatorSize 支持（detail/list 模式）

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

@@ -1,7 +1,7 @@
 // src/views/Community/components/DynamicNewsCard/EventScrollList.js
 // 横向滚动事件列表组件
 
-import React, { useRef } from 'react';
+import React, { useRef, useCallback } from 'react';
 import {
   Box,
   Flex,
@@ -44,6 +44,7 @@ const EventScrollList = ({
   totalPages,
   onPageChange,
   loading = false,
+  error,                // 错误状态
   mode = 'vertical',
   onModeChange,
   hasMore = true,
@@ -72,20 +73,27 @@ const EventScrollList = ({
     };
   };
 
+  // 重试函数
+  const handleRetry = useCallback(() => {
+    if (onPageChange) {
+      onPageChange(currentPage);
+    }
+  }, [onPageChange, currentPage]);
+
   return (
     <Box>
-      {/* 顶部控制栏：模式切换按钮（左）+ 分页控制器（右） */}
+      {/* 顶部控制栏：模式切换按钮 + 分页控制器 */}
       <Flex justify="space-between" align="center" mb={2}>
-        {/* 模式切换按钮 */}
+        {/* 左侧：模式切换按钮 */}
         <ModeToggleButtons mode={mode} onModeChange={onModeChange} />
 
-        {/* 分页控制器（平铺模式不显示，使用无限滚动） */}
-        {totalPages > 1 && mode !== 'four-row' && (
-            <PaginationControl
-              currentPage={currentPage}
-              totalPages={totalPages}
-              onPageChange={onPageChange}
-            />
+        {/* 右侧：分页控制器（纵向和平铺模式都显示） */}
+        {totalPages > 1 && (
+          <PaginationControl
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
+          />
         )}
       </Flex>
 
@@ -116,11 +124,9 @@ const EventScrollList = ({
       <Box
         ref={scrollContainerRef}
         overflowX="hidden"
-        overflowY="hidden"
-        maxH={mode === 'vertical' ? '820px' : 'none'}
         pt={0}
         pb={4}
-        px={2}
+        px={mode === 'four-row' ? 0 : 2}
         position="relative"
         css={{
           // 统一滚动条样式（支持横向和纵向）
@@ -146,6 +152,7 @@ const EventScrollList = ({
         {/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
         {mode === 'four-row' && (
           <VirtualizedFourRowGrid
+            columnsPerRow={4}                // 每行显示4列
             events={displayEvents || events}  // 使用累积列表（如果有）
             selectedEvent={selectedEvent}
             onEventSelect={onFourRowEventClick}  // 四排模式点击打开弹窗
@@ -157,6 +164,8 @@ const EventScrollList = ({
             loadPrevPage={loadPrevPage}      // 加载上一页（双向滚动）
             hasMore={hasMore}                // 是否还有更多数据
             loading={loading}                // 加载状态
+            error={error}                    // 错误状态
+            onRetry={handleRetry}            // 重试回调
           />
         )}
 
@@ -170,9 +179,9 @@ const EventScrollList = ({
             onToggleFollow={onToggleFollow}
             getTimelineBoxStyle={getTimelineBoxStyle}
             borderColor={borderColor}
-            scrollbarTrackBg={scrollbarTrackBg}
-            scrollbarThumbBg={scrollbarThumbBg}
-            scrollbarThumbHoverBg={scrollbarThumbHoverBg}
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
           />
         )}
       </Box>