@@ -32,14 +32,15 @@ export default function PaginatedRow({
3232 }
3333 } , [ children , startIndex , itemsPerPage ] ) ;
3434
35- // 向前翻页 - 只有不在第一页时才能向前
35+ // 向前翻页 - 禁止超出第一页
3636 const handlePrevPage = ( ) => {
37- if ( startIndex > 0 ) {
38- setStartIndex ( ( prev ) => Math . max ( 0 , prev - itemsPerPage ) ) ;
39- }
37+ setStartIndex ( ( prev ) => {
38+ const newIndex = prev - itemsPerPage ;
39+ return newIndex < 0 ? 0 : newIndex ; // 不允许小于0
40+ } ) ;
4041 } ;
4142
42- // 向后翻页 - 支持无限浏览,到达末尾时循环到开头
43+ // 向后翻页 - 真正的无限浏览
4344 const handleNextPage = ( ) => {
4445 setStartIndex ( ( prev ) => {
4546 const newIndex = prev + itemsPerPage ;
@@ -50,7 +51,10 @@ export default function PaginatedRow({
5051
5152 // 检查是否可以向前翻页
5253 const canGoPrev = startIndex > 0 ;
53- // 检查是否需要显示翻页按钮
54+ // 总是可以向后翻页(无限循环)
55+ const canGoNext = children . length > itemsPerPage ;
56+
57+ // 如果没有足够的内容需要分页,就不显示按钮
5458 const needsPagination = children . length > itemsPerPage ;
5559
5660 return (
@@ -84,23 +88,27 @@ export default function PaginatedRow({
8488 </ button >
8589 ) }
8690
87- { /* 右箭头按钮 - 始终显示 */ }
88- < button
89- onClick = { handleNextPage }
90- className = { `absolute -right-12 z-20 w-10 h-10 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
91- isHovered ? 'opacity-100' : 'opacity-0'
92- } `}
93- style = { {
94- // 确保按钮在两行中间
95- top : 'calc(50% - 20px)' ,
96- } }
97- aria-label = '下一页'
98- >
99- < ChevronRight className = 'w-5 h-5 text-white' />
100- </ button >
91+ { /* 右箭头按钮 - 总是显示,支持无限循环 */ }
92+ { canGoNext && (
93+ < button
94+ onClick = { handleNextPage }
95+ className = { `absolute -right-12 z-20 w-10 h-10 bg-gradient-to-r from-purple-500 to-purple-600 hover:from-purple-600 hover:to-purple-700 rounded-full shadow-lg hover:shadow-xl flex items-center justify-center transition-all duration-300 hover:scale-110 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 dark:focus:ring-offset-gray-900 ${
96+ isHovered ? 'opacity-100' : 'opacity-0'
97+ } `}
98+ style = { {
99+ // 确保按钮在两行中间
100+ top : 'calc(50% - 20px)' ,
101+ } }
102+ aria-label = '下一页'
103+ >
104+ < ChevronRight className = 'w-5 h-5 text-white' />
105+ </ button >
106+ ) }
101107 </ >
102108 ) }
103109 </ div >
110+
111+ { /* 移除页码指示器 - 不再需要 */ }
104112 </ div >
105113 ) ;
106114}
0 commit comments