From 0f7693939a459577aeb3273d97c65040a8c36df9 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 13:37:18 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=E5=8D=95?=
 =?UTF-8?q?=E6=8E=92=E5=92=8C=E5=8F=8C=E6=8E=92=E6=A8=A1=E5=BC=8F=EF=BC=8C?=
 =?UTF-8?q?=E7=AE=80=E5=8C=96=E4=BA=8B=E4=BB=B6=E5=88=97=E8=A1=A8=E5=B1=95?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

问题：
- 事件列表组件包含4种模式（单排/双排/纵向/平铺）
- 单排（carousel）和双排（grid）模式代码已被注释，未实际使用
- 保留未使用代码增加维护成本和代码复杂度

修改：
1. 删除未使用的 import（DynamicNewsEventCard, CompactEventCard, Spinner, HStack）
2. 删除加载遮罩相关代码（仅单排/双排模式使用）
3. 删除已注释的单排/双排切换按钮代码
4. 删除单排轮播模式完整实现（~32行）
5. 删除双排网格模式完整实现（~33行）
6. 更新组件注释：明确只支持纵向和平铺两种模式
7. 更新默认模式：carousel → vertical
8. 简化条件判断（overflowX/overflowY/maxH）

效果：
- 代码从 361 行缩减到 254 行（删除 ~107 行）
- 只保留两种实际使用的模式：纵向（vertical）和平铺（four-row）
- 降低代码复杂度，提升可维护性

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../DynamicNewsCard/EventScrollList.js        | 126 ++----------------
 1 file changed, 8 insertions(+), 118 deletions(-)

diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
index d6f69fa0..c7eb3d92 100644
--- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js
+++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js
@@ -11,13 +11,9 @@ import {
   ButtonGroup,
   Center,
   VStack,
-  HStack,
-  Spinner,
   Text,
   useColorModeValue
 } from '@chakra-ui/react';
-import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard';
-import CompactEventCard from '../EventCard/CompactEventCard';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
 import DynamicNewsDetailPanel from '../DynamicNewsDetail';
 import PaginationControl from './PaginationControl';
@@ -25,7 +21,7 @@ import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
 import PageNavigationButton from './PageNavigationButton';
 
 /**
- * 事件列表组件 - 支持两种展示模式
+ * 事件列表组件 - 支持纵向和平铺两种展示模式
  * @param {Array} events - 当前页的事件列表（服务端已分页）
  * @param {Object} selectedEvent - 当前选中的事件
  * @param {Function} onEventSelect - 事件选择回调
@@ -35,7 +31,7 @@ import PageNavigationButton from './PageNavigationButton';
  * @param {Function} onPageChange - 页码改变回调
  * @param {boolean} loading - 全局加载状态
  * @param {number|null} loadingPage - 正在加载的目标页码（用于显示"正在加载第X页..."）
- * @param {string} mode - 展示模式：'carousel'（单排轮播）| 'grid'（双排网格）
+ * @param {string} mode - 展示模式：'vertical'（纵向分栏）| 'four-row'（平铺网格）
  * @param {Function} onModeChange - 模式切换回调
  * @param {boolean} hasMore - 是否还有更多数据
  * @param {Object} eventFollowStatus - 事件关注状态 { [eventId]: { isFollowing, followerCount } }
@@ -55,7 +51,7 @@ const EventScrollList = ({
   totalPages,
   onPageChange,
   loading = false,
-  mode = 'carousel',
+  mode = 'vertical',
   onModeChange,
   hasMore = true,
   eventFollowStatus = {},
@@ -73,10 +69,6 @@ const EventScrollList = ({
   const scrollbarThumbBg = useColorModeValue('#888', '#4A5568');
   const scrollbarThumbHoverBg = useColorModeValue('#555', '#718096');
 
-  // 加载遮罩颜色
-  const loadingOverlayBg = useColorModeValue('whiteAlpha.800', 'blackAlpha.700');
-  const loadingTextColor = useColorModeValue('gray.600', 'gray.300');
-
   const getTimelineBoxStyle = () => {
     return {
       bg: timelineBg,
@@ -89,24 +81,10 @@ const EventScrollList = ({
 
   return (
     <Box>
-      {/* 顶部控制栏：模式切换按钮（左）+ 分页控制器 + 加载提示（右） */}
+      {/* 顶部控制栏：模式切换按钮（左）+ 分页控制器（右） */}
       <Flex justify="space-between" align="center" mb={2}>
         {/* 模式切换按钮 */}
         <ButtonGroup size="sm" isAttached>
-          {/* <Button
-            onClick={() => onModeChange('carousel')}
-            colorScheme="blue"
-            variant={mode === 'carousel' ? 'solid' : 'outline'}
-          >
-            单排
-          </Button>
-          <Button
-            onClick={() => onModeChange('grid')}
-            colorScheme="blue"
-            variant={mode === 'grid' ? 'solid' : 'outline'}
-          >
-            双排
-          </Button> */}
           <Button
             onClick={() => onModeChange('vertical')}
             colorScheme="blue"
@@ -159,9 +137,9 @@ const EventScrollList = ({
       {/* 事件卡片容器 */}
       <Box
         ref={scrollContainerRef}
-        overflowX={mode === 'carousel' ? 'auto' : 'hidden'}
-        overflowY={mode === 'four-row' || mode === 'vertical' ? 'hidden' : 'auto'}
-        maxH={mode === 'vertical' ? '820px' : (mode === 'four-row' ? 'none' : '800px')}
+        overflowX="hidden"
+        overflowY="hidden"
+        maxH={mode === 'vertical' ? '820px' : 'none'}
         pt={0}
         pb={4}
         px={2}
@@ -187,95 +165,7 @@ const EventScrollList = ({
           WebkitOverflowScrolling: 'touch',
         }}
       >
-        {/* 加载遮罩 - 四排和纵向模式不显示（使用底部 loading 指示器） */}
-        {loading && mode !== 'four-row' && mode !== 'vertical' && (
-          <Center
-            position="absolute"
-            top={0}
-            left={0}
-            right={0}
-            bottom={0}
-            bg={loadingOverlayBg}
-            backdropFilter="blur(2px)"
-            zIndex={10}
-            borderRadius="md"
-          >
-            <VStack>
-              <Spinner size="lg" color="blue.500" thickness="3px" />
-              <Text fontSize="sm" color={loadingTextColor}>
-                加载中...
-              </Text>
-            </VStack>
-          </Center>
-        )}
-
-        {/* 模式1: 单排轮播模式 */}
-        {mode === 'carousel' && (
-          <Flex gap={4}>
-            {events.map((event, index) => (
-              <Box
-                key={event.id}
-                minW="calc((100% - 64px) / 5)"
-                maxW="calc((100% - 64px) / 5)"
-                flexShrink={0}
-              >
-                <DynamicNewsEventCard
-                  event={event}
-                  index={index}
-                  isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
-                  followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
-                  isSelected={selectedEvent?.id === event.id}
-                  onEventClick={(clickedEvent) => {
-                    onEventSelect(clickedEvent);
-                  }}
-                  onTitleClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onEventSelect(event);
-                  }}
-                  onToggleFollow={() => onToggleFollow?.(event.id)}
-                  timelineStyle={getTimelineBoxStyle()}
-                  borderColor={borderColor}
-                />
-              </Box>
-            ))}
-          </Flex>
-        )}
-
-        {/* 模式2: 双排网格模式 */}
-        {mode === 'grid' && (
-          <Grid
-            templateRows="repeat(2, 1fr)"
-            templateColumns="repeat(5, 1fr)"
-            gap={4}
-            autoFlow="column"
-          >
-            {events.map((event, index) => (
-              <Box key={event.id}>
-                <DynamicNewsEventCard
-                  event={event}
-                  index={index}
-                  isFollowing={eventFollowStatus[event.id]?.isFollowing || false}
-                  followerCount={eventFollowStatus[event.id]?.followerCount || event.follower_count || 0}
-                  isSelected={selectedEvent?.id === event.id}
-                  onEventClick={(clickedEvent) => {
-                    onEventSelect(clickedEvent);
-                  }}
-                  onTitleClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
-                    onEventSelect(event);
-                  }}
-                  onToggleFollow={() => onToggleFollow?.(event.id)}
-                  timelineStyle={getTimelineBoxStyle()}
-                  borderColor={borderColor}
-                />
-              </Box>
-            ))}
-          </Grid>
-        )}
-
-        {/* 模式3: 四排网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
+        {/* 平铺网格模式 - 使用虚拟滚动 + 双向无限滚动 */}
         {mode === 'four-row' && (
           <VirtualizedFourRowGrid
             events={displayEvents || events}  // 使用累积列表（如果有）