diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
index c7eb3d92..26f9cb56 100644
--- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js
+++ b/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>
-          <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>
+        <ModeToggleButtons mode={mode} onModeChange={onModeChange} />
 
         {/* 分页控制器（平铺模式不显示，使用无限滚动） */}
         {totalPages > 1 && mode !== 'four-row' && (
diff --git a/src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js b/src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js
new file mode 100644
index 00000000..813f1d23
--- /dev/null
+++ b/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;