From 0da18e868ae8d1de2be7f72ba39066647ea40b47 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 13:44:34 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=20ModeToggleButt?=
 =?UTF-8?q?ons=20=E4=B8=BA=E7=8B=AC=E7=AB=8B=E5=AD=90=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：
- 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>
---
 .../DynamicNewsCard/EventScrollList.js        | 20 ++---------
 .../DynamicNewsCard/ModeToggleButtons.js      | 33 +++++++++++++++++++
 2 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 src/views/Community/components/DynamicNewsCard/ModeToggleButtons.js

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;