Compare commits
4 Commits
37eba48906
...
30520542c8
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
30520542c8 | ||
|
|
035bb9a66d | ||
|
|
8bd7f59d35 | ||
|
|
db0d0ed269 |
@@ -32,7 +32,6 @@ export default function Home() {
|
||||
<Routes>
|
||||
{/* 首页默认路由 */}
|
||||
<Route path="/" element={<HomePage />} />
|
||||
<Route path="/dashboard" element={<HomePage />} />
|
||||
<Route
|
||||
path="/center"
|
||||
element={
|
||||
|
||||
@@ -765,6 +765,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
|
||||
@@ -777,31 +820,26 @@ const EventList = ({ events, pagination, onPageChange, onEventClick, onViewDetai
|
||||
</Button>
|
||||
|
||||
<HStack spacing={1}>
|
||||
{[...Array(Math.min(5, totalPages))].map((_, i) => {
|
||||
const pageNum = i + 1;
|
||||
{pageNumbers.map((page, index) => {
|
||||
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'}
|
||||
colorScheme={current === pageNum ? 'blue' : 'gray'}
|
||||
onClick={() => onChange(pageNum)}
|
||||
variant={current === page ? 'solid' : 'ghost'}
|
||||
colorScheme={current === page ? 'blue' : 'gray'}
|
||||
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
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
// src/views/Community/index.js
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
import React, { useState, useEffect, useCallback, useRef } from 'react';
|
||||
import { useSearchParams, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
Box,
|
||||
@@ -97,6 +97,9 @@ const Community = () => {
|
||||
const { isOpen: isEventModalOpen, onOpen: onEventModalOpen, onClose: onEventModalClose } = useDisclosure();
|
||||
const { isOpen: isStockDrawerOpen, onOpen: onStockDrawerOpen, onClose: onStockDrawerClose } = useDisclosure();
|
||||
|
||||
// Ref:用于滚动到实时事件时间轴
|
||||
const eventTimelineRef = useRef(null);
|
||||
|
||||
// ⚡ 通知权限引导
|
||||
const { showCommunityGuide } = useNotification();
|
||||
|
||||
@@ -214,7 +217,16 @@ const Community = () => {
|
||||
const handlePageChange = useCallback((page) => {
|
||||
updateUrlParams({ page });
|
||||
loadEvents(page);
|
||||
window.scrollTo(0, 0);
|
||||
|
||||
// 滚动到实时事件时间轴(平滑滚动)
|
||||
setTimeout(() => {
|
||||
if (eventTimelineRef.current) {
|
||||
eventTimelineRef.current.scrollIntoView({
|
||||
behavior: 'smooth', // 平滑滚动
|
||||
block: 'start' // 滚动到元素顶部
|
||||
});
|
||||
}
|
||||
}, 100); // 延迟100ms,确保DOM更新
|
||||
}, [updateUrlParams, loadEvents]);
|
||||
|
||||
// 处理事件点击
|
||||
@@ -326,7 +338,7 @@ const Community = () => {
|
||||
)}
|
||||
|
||||
{/* 事件列表卡片 */}
|
||||
<Card bg={cardBg} borderColor={borderColor}>
|
||||
<Card ref={eventTimelineRef} bg={cardBg} borderColor={borderColor}>
|
||||
<CardHeader>
|
||||
<Flex justify="space-between" align="center">
|
||||
<VStack align="start" spacing={1}>
|
||||
|
||||
Reference in New Issue
Block a user