refactor: 提取 ModeToggleButtons 为独立子组件

问题：
- EventScrollList 组件中模式切换按钮代码内联（17行）
- 降低代码可读性和可维护性
- 按钮组无法在其他地方复用

修改：
1. 新建 ModeToggleButtons.js 独立组件
   - 接收 mode 和 onModeChange 两个 props
   - 包含完整的 JSDoc 注释
   - 支持 vertical（纵向）和 four-row（平铺）两种模式

2. 重构 EventScrollList.js
   - 删除未使用的 import（Button, ButtonGroup）
   - 导入 ModeToggleButtons 组件
   - 替换 17 行内联代码为 1 行组件调用
   - 代码净减少 14 行

效果：
- ✅ 职责分离：模式切换逻辑独立封装
- ✅ 可复用性：其他页面可直接导入使用
- ✅ 易维护性：修改按钮样式只需改一个文件
- ✅ 易测试性：可单独编写单元测试
- ✅ 代码简洁：EventScrollList 更简洁易读

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

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

@@ -7,8 +7,6 @@ import {
   Flex,
   Grid,
   GridItem,
-  Button,
-  ButtonGroup,
   Center,
   VStack,
   Text,
@@ -19,6 +17,7 @@ import DynamicNewsDetailPanel from '../DynamicNewsDetail';
 import PaginationControl from './PaginationControl';
 import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
 import PageNavigationButton from './PageNavigationButton';
+import ModeToggleButtons from './ModeToggleButtons';
 
 /**
  * 事件列表组件 - 支持纵向和平铺两种展示模式
@@ -84,22 +83,7 @@ const EventScrollList = ({
       {/* 顶部控制栏：模式切换按钮（左）+ 分页控制器（右） */}
       <Flex justify="space-between" align="center" mb={2}>
         {/* 模式切换按钮 */}
-        <ButtonGroup size="sm" isAttached>
+        <ModeToggleButtons mode={mode} onModeChange={onModeChange} />
-          <Button
-            onClick={() => onModeChange('vertical')}
-            colorScheme="blue"
-            variant={mode === 'vertical' ? 'solid' : 'outline'}
-          >
-            纵向
-          </Button>
-          <Button
-            onClick={() => onModeChange('four-row')}
-            colorScheme="blue"
-            variant={mode === 'four-row' ? 'solid' : 'outline'}
-          >
-            平铺
-          </Button>
-        </ButtonGroup>
 
         {/* 分页控制器（平铺模式不显示，使用无限滚动） */}
         {totalPages > 1 && mode !== 'four-row' && (

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

@@ -0,0 +1,33 @@
+// src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js
+// 事件列表模式切换按钮组
+
+import React from 'react';
+import { Button, ButtonGroup } from '@chakra-ui/react';
+
+/**
+ * 事件列表模式切换按钮组
+ * @param {string} mode - 当前模式 'vertical' | 'four-row'
+ * @param {Function} onModeChange - 模式切换回调
+ */
+const ModeToggleButtons = ({ mode, onModeChange }) => {
+  return (
+    <ButtonGroup size="sm" isAttached>
+      <Button
+        onClick={() => onModeChange('vertical')}
+        colorScheme="blue"
+        variant={mode === 'vertical' ? 'solid' : 'outline'}
+      >
+        纵向
+      </Button>
+      <Button
+        onClick={() => onModeChange('four-row')}
+        colorScheme="blue"
+        variant={mode === 'four-row' ? 'solid' : 'outline'}
+      >
+        平铺
+      </Button>
+    </ButtonGroup>
+  );
+};
+
+export default ModeToggleButtons;