From b223be2f01694e0d109c84d644da3b5e14a9fecf Mon Sep 17 00:00:00 2001 From: zdl <3489966805@qq.com> Date: Wed, 5 Nov 2025 09:15:33 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20=E6=8F=90=E5=8F=96=E7=BF=BB?= =?UTF-8?q?=E9=A1=B5=E6=8C=89=E9=92=AE=E4=B8=BA=E5=8F=AF=E5=A4=8D=E7=94=A8?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 创建 PageNavigationButton 组件 · 通过 direction 参数区分上一页/下一页 · 内置主题适配和模式判断逻辑 · 自动处理显示条件（只在单排/双排模式显示） - 重构 EventScrollList · 删除重复的翻页按钮代码（减少 66 行） · 使用 PageNavigationButton 组件替换原有按钮 · 移除未使用的导入（IconButton, ChevronLeftIcon, ChevronRightIcon） · 移除翻页按钮主题色定义（已移至子组件） 优点： - 消除重复代码，提升可维护性 - 职责分离，逻辑更清晰 - 易于扩展（可添加首页/末页按钮） --- .../DynamicNewsCard/EventScrollList.js | 80 ++++-------------- .../DynamicNewsCard/PageNavigationButton.js | 83 +++++++++++++++++++ 2 files changed, 97 insertions(+), 66 deletions(-) create mode 100644 src/views/Community/components/DynamicNewsCard/PageNavigationButton.js diff --git a/src/views/Community/components/DynamicNewsCard/EventScrollList.js b/src/views/Community/components/DynamicNewsCard/EventScrollList.js index acc48b65..b0511e33 100644 --- a/src/views/Community/components/DynamicNewsCard/EventScrollList.js +++ b/src/views/Community/components/DynamicNewsCard/EventScrollList.js @@ -7,7 +7,6 @@ import { Flex, Grid, GridItem, - IconButton, Button, ButtonGroup, Center, @@ -17,13 +16,13 @@ import { Text, useColorModeValue } from '@chakra-ui/react'; -import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'; import DynamicNewsEventCard from '../EventCard/DynamicNewsEventCard'; import CompactEventCard from '../EventCard/CompactEventCard'; import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard'; import DynamicNewsDetailPanel from '../DynamicNewsDetail'; import PaginationControl from './PaginationControl'; import VirtualizedFourRowGrid from './VirtualizedFourRowGrid'; +import PageNavigationButton from './PageNavigationButton'; /** * 事件列表组件 - 支持两种展示模式 @@ -68,10 +67,6 @@ const EventScrollList = ({ const timelineBorderColor = useColorModeValue('gray.400', 'gray.500'); const timelineTextColor = useColorModeValue('blue.600', 'blue.400'); - // 翻页按钮颜色 - const arrowBtnBg = useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)'); - const arrowBtnHoverBg = useColorModeValue('rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 0.8)'); - // 滚动条颜色 const scrollbarTrackBg = useColorModeValue('#f1f1f1', '#2D3748'); const scrollbarThumbBg = useColorModeValue('#888', '#4A5568'); @@ -140,68 +135,21 @@ const EventScrollList = ({ {/* 横向滚动区域 */} - {/* 左侧翻页按钮 - 上一页 */} - {currentPage > 1 && ( - } - position="absolute" - left="0" - top="50%" - transform="translateY(-50%)" - zIndex={2} - onClick={() => { - console.log(`%c🔵 [翻页] 点击上一页: 当前页${currentPage} → 目标页${currentPage - 1} (共${totalPages}页)`, 'color: #3B82F6; font-weight: bold;'); - onPageChange(currentPage - 1); - }} - variant="ghost" - size="md" - w="40px" - h="40px" - minW="40px" - borderRadius="full" - bg={arrowBtnBg} - boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)" - _hover={{ - bg: arrowBtnHoverBg, - boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)', - transform: 'translateY(-50%) scale(1.05)' - }} - aria-label="上一页" - title="上一页" + {/* 翻页导航按钮 */} + - )} - - {/* 右侧翻页按钮 - 下一页 */} - {currentPage < totalPages && ( - } - position="absolute" - right="0" - top="50%" - transform="translateY(-50%)" - zIndex={2} - onClick={() => { - console.log(`%c🔵 [翻页] 点击下一页: 当前页${currentPage} → 目标页${currentPage + 1} (共${totalPages}页)`, 'color: #3B82F6; font-weight: bold;'); - onPageChange(currentPage + 1); - }} - variant="ghost" - size="md" - w="40px" - h="40px" - minW="40px" - borderRadius="full" - bg={arrowBtnBg} - boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)" - _hover={{ - bg: arrowBtnHoverBg, - boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)', - transform: 'translateY(-50%) scale(1.05)' - }} - isDisabled={currentPage >= totalPages} - aria-label="下一页" - title="下一页" + - )} {/* 事件卡片容器 */} { + // 主题适配 + const arrowBtnBg = useColorModeValue('rgba(255, 255, 255, 0.9)', 'rgba(0, 0, 0, 0.6)'); + const arrowBtnHoverBg = useColorModeValue('rgba(255, 255, 255, 1)', 'rgba(0, 0, 0, 0.8)'); + + // 根据方向计算配置 + const isPrev = direction === 'prev'; + const isNext = direction === 'next'; + + const Icon = isPrev ? ChevronLeftIcon : ChevronRightIcon; + const position = isPrev ? 'left' : 'right'; + const label = isPrev ? '上一页' : '下一页'; + const targetPage = isPrev ? currentPage - 1 : currentPage + 1; + const shouldShow = isPrev + ? currentPage > 1 + : currentPage < totalPages; + const isDisabled = isNext ? currentPage >= totalPages : false; + + // 判断是否显示（只在单排/双排模式显示） + const shouldRender = shouldShow && (mode === 'carousel' || mode === 'grid'); + + if (!shouldRender) return null; + + const handleClick = () => { + console.log( + `%c🔵 [翻页] 点击${label}: 当前页${currentPage} → 目标页${targetPage} (共${totalPages}页)`, + 'color: #3B82F6; font-weight: bold;' + ); + onPageChange(targetPage); + }; + + return ( + } + position="absolute" + {...{ [position]: 0 }} + top="50%" + transform="translateY(-50%)" + zIndex={2} + onClick={handleClick} + variant="ghost" + size="md" + w="40px" + h="40px" + minW="40px" + borderRadius="full" + bg={arrowBtnBg} + boxShadow="0 2px 8px rgba(0, 0, 0, 0.15)" + _hover={{ + bg: arrowBtnHoverBg, + boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)', + transform: 'translateY(-50%) scale(1.05)' + }} + isDisabled={isDisabled} + aria-label={label} + title={label} + /> + ); +}; + +export default PageNavigationButton;