feat: 补充翻页功能

src/views/Community/components/EventList.js

@@ -750,6 +750,49 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
     const Pagination = ({ current, total, pageSize, onChange }) => {
         const totalPages = Math.ceil(total / pageSize);
 
+        // 计算要显示的页码数组（智能分页）
+        const getPageNumbers = () => {
+            const delta = 2; // 当前页左右各显示2个页码
+            const range = [];
+            const rangeWithDots = [];
+
+            // 始终显示第1页
+            range.push(1);
+
+            // 显示当前页附近的页码
+            for (let i = current - delta; i <= current + delta; i++) {
+                if (i > 1 && i < totalPages) {
+                    range.push(i);
+                }
+            }
+
+            // 始终显示最后一页（如果总页数>1）
+            if (totalPages > 1) {
+                range.push(totalPages);
+            }
+
+            // 去重并排序
+            const uniqueRange = [...new Set(range)].sort((a, b) => a - b);
+
+            // 添加省略号
+            let prev = 0;
+            for (const page of uniqueRange) {
+                if (page - prev === 2) {
+                    // 如果只差一个页码，直接显示
+                    rangeWithDots.push(prev + 1);
+                } else if (page - prev > 2) {
+                    // 如果差距大于2，显示省略号
+                    rangeWithDots.push('...');
+                }
+                rangeWithDots.push(page);
+                prev = page;
+            }
+
+            return rangeWithDots;
+        };
+
+        const pageNumbers = getPageNumbers();
+
         return (
             <Flex justify="center" align="center" mt={8} gap={2}>
                 <Button
@@ -762,31 +805,26 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
                 </Button>
 
                 <HStack spacing={1}>
-                    {[...Array(Math.min(5, totalPages))].map((_, i) => {
+                    {pageNumbers.map((page, index) => {
-                        const pageNum = i + 1;
+                        if (page === '...') {
+                            return (
+                                <Text key={`ellipsis-${index}`} px={2} color="gray.500">
+                                    ...
+                                </Text>
+                            );
+                        }
                         return (
                             <Button
-                                key={pageNum}
+                                key={page}
                                 size="sm"
-                                variant={current === pageNum ? 'solid' : 'ghost'}
+                                variant={current === page ? 'solid' : 'ghost'}
-                                colorScheme={current === pageNum ? 'blue' : 'gray'}
+                                colorScheme={current === page ? 'blue' : 'gray'}
-                                onClick={() => onChange(pageNum)}
+                                onClick={() => onChange(page)}
                             >
-                                {pageNum}
+                                {page}
                             </Button>
                         );
                     })}
-                    {totalPages > 5 && <Text>...</Text>}
-                    {totalPages > 5 && (
-                        <Button
-                            size="sm"
-                            variant={current === totalPages ? 'solid' : 'ghost'}
-                            colorScheme={current === totalPages ? 'blue' : 'gray'}
-                            onClick={() => onChange(totalPages)}
-                        >
-                            {totalPages}
-                        </Button>
-                    )}
                 </HStack>
 
                 <Button