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

src/views/Community/components/DynamicNewsCard.js

@@ -25,7 +25,7 @@ import UnifiedSearchBox from './UnifiedSearchBox';
 import { fetchDynamicNews } from '../../../store/slices/communityDataSlice';
 
 /**
- * 实时要闻·动态追踪 - 横向滚动卡片组件
+ * 实时要闻·动态追踪 - 事件展示卡片组件
  * @param {Array} events - 事件列表
  * @param {boolean} loading - 加载状态
  * @param {Object} pagination - 分页信息 { page, per_page, total, total_pages }
@@ -36,6 +36,7 @@ import { fetchDynamicNews } from '../../../store/slices/communityDataSlice';
  * @param {Function} onSearchFocus - 搜索框获得焦点回调
  * @param {Function} onEventClick - 事件点击回调
  * @param {Function} onViewDetail - 查看详情回调
+ * @param {string} mode - 展示模式：'carousel'（单排轮播5个）| 'grid'（双排网格10个）
  * @param {Object} ref - 用于滚动的ref
  */
 const DynamicNewsCard = forwardRef(({
@@ -55,11 +56,25 @@ const DynamicNewsCard = forwardRef(({
   const cardBg = useColorModeValue('white', 'gray.800');
   const borderColor = useColorModeValue('gray.200', 'gray.700');
   const [selectedEvent, setSelectedEvent] = useState(null);
+  const [mode, setMode] = useState('carousel'); // 'carousel' 或 'grid'，默认单排
 
-  const pageSize = 5; // 每页显示5个事件
+  // 根据模式决定每页显示数量
+  const pageSize = mode === 'carousel' ? 5 : 10; // carousel: 5个, grid: 10个
   const currentPage = pagination.page || 1;
   const totalPages = pagination.total_pages || 1;
 
+  // 模式切换处理
+  const handleModeToggle = (newMode) => {
+    if (newMode !== mode) {
+      setMode(newMode);
+      // 切换模式时重置到第1页并重新请求数据
+      const newPageSize = newMode === 'carousel' ? 5 : 10;
+      dispatch(fetchDynamicNews({ page: 1, per_page: newPageSize }));
+      // 清除当前选中的事件
+      setSelectedEvent(null);
+    }
+  };
+
   // 默认选中第一个事件
   useEffect(() => {
     if (events && events.length > 0 && !selectedEvent) {
@@ -123,6 +138,8 @@ const DynamicNewsCard = forwardRef(({
             totalPages={totalPages}
             onPageChange={handlePageChange}
             loading={loading}
+            mode={mode}
+            onModeChange={handleModeToggle}
           />
         ) : !loading ? (
           /* Empty 状态 - 只在非加载且无数据时显示 */