b223be2f01
- 创建 PageNavigationButton 组件 · 通过 direction 参数区分上一页/下一页 · 内置主题适配和模式判断逻辑 · 自动处理显示条件（只在单排/双排模式显示） - 重构 EventScrollList · 删除重复的翻页按钮代码（减少 66 行） · 使用 PageNavigationButton 组件替换原有按钮 · 移除未使用的导入（IconButton, ChevronLeftIcon, ChevronRightIcon） · 移除翻页按钮主题色定义（已移至子组件） 优点： - 消除重复代码，提升可维护性 - 职责分离，逻辑更清晰 - 易于扩展（可添加首页/末页按钮）
84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
// src/views/Community/components/DynamicNewsCard/PageNavigationButton.js
|
||
// 翻页导航按钮组件
|
||
|
||
import React from 'react';
|
||
import { IconButton, useColorModeValue } from '@chakra-ui/react';
|
||
import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
|
||
|
||
/**
|
||
* 翻页导航按钮组件
|
||
* @param {Object} props
|
||
* @param {'prev'|'next'} props.direction - 按钮方向（prev=上一页，next=下一页）
|
||
* @param {number} props.currentPage - 当前页码
|
||
* @param {number} props.totalPages - 总页数
|
||
* @param {Function} props.onPageChange - 翻页回调
|
||
* @param {string} props.mode - 显示模式（只在carousel/grid模式下显示）
|
||
*/
|
||
const PageNavigationButton = ({
|
||
direction,
|
||
currentPage,
|
||
totalPages,
|
||
onPageChange,
|
||
mode
|
||
}) => {
|
||
// 主题适配
|
||
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 (
|
||
<IconButton
|
||
icon={<Icon boxSize={6} color="blue.500" />}
|
||
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;
|