feat: 优化社区页面滚动和分页交互体验…)

⎿  [feature_2025/1028_event 5dedbb3] feat: 优化社区页面滚动和分页交互体验
      6 files changed, 1355 insertions(+), 49 deletions(-)
      create mode 100644 docs/test-cases/Community351241265351235242346265213350257225347224250344276213.md

src/views/Community/components/DynamicNewsCard.js

@@ -72,8 +72,8 @@ const DynamicNewsCard = forwardRef(({
     // 发起 Redux action 获取新页面数据
     dispatch(fetchDynamicNews({ page: newPage, per_page: pageSize }));
 
-    // 重置选中事件（等新数据加载后自动选中第一个）
+    // 保持当前选中事件，避免详情面板消失导致页面抖动
-    setSelectedEvent(null);
+    // 新数据加载完成后，useEffect 会自动选中第一个事件
   };
 
   return (
@@ -112,27 +112,8 @@ const DynamicNewsCard = forwardRef(({
 
       {/* 主体内容 */}
       <CardBody position="relative">
-        {/* Loading 状态 */}
+        {/* 横向滚动事件列表 - 始终渲染（除非为空） */}
-        {loading && (
+        {events && events.length > 0 ? (
-          <Center py={10}>
-            <VStack>
-              <Spinner size="xl" color="blue.500" thickness="4px" />
-              <Text color="gray.500">正在加载最新事件...</Text>
-            </VStack>
-          </Center>
-        )}
-
-        {/* Empty 状态 */}
-        {!loading && (!events || events.length === 0) && (
-          <Center py={10}>
-            <VStack>
-              <Text fontSize="lg" color="gray.500">暂无事件数据</Text>
-            </VStack>
-          </Center>
-        )}
-
-        {/* 横向滚动事件列表 */}
-        {!loading && events && events.length > 0 && (
           <EventScrollList
             events={events}
             selectedEvent={selectedEvent}
@@ -141,11 +122,27 @@ const DynamicNewsCard = forwardRef(({
             currentPage={currentPage}
             totalPages={totalPages}
             onPageChange={handlePageChange}
+            loading={loading}
           />
+        ) : !loading ? (
+          /* Empty 状态 - 只在非加载且无数据时显示 */
+          <Center py={10}>
+            <VStack>
+              <Text fontSize="lg" color="gray.500">暂无事件数据</Text>
+            </VStack>
+          </Center>
+        ) : (
+          /* 首次加载状态 */
+          <Center py={10}>
+            <VStack>
+              <Spinner size="xl" color="blue.500" thickness="4px" />
+              <Text color="gray.500">正在加载最新事件...</Text>
+            </VStack>
+          </Center>
         )}
 
-        {/* 详情面板 */}
+        {/* 详情面板 - 始终显示（如果有选中事件） */}
-        {!loading && events && events.length > 0 && (
+        {events && events.length > 0 && selectedEvent && (
           <Box mt={6}>
             <DynamicNewsDetailPanel event={selectedEvent} />
           </Box>

src/views/Community/components/DynamicNewsCard/EventScrollList.js

@@ -6,6 +6,10 @@ import {
   Box,
   Flex,
   IconButton,
+  Center,
+  VStack,
+  Spinner,
+  Text,
   useColorModeValue
 } from '@chakra-ui/react';
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
@@ -21,6 +25,7 @@ import PaginationControl from './PaginationControl';
  * @param {number} currentPage - 当前页码
  * @param {number} totalPages - 总页数（由服务端返回）
  * @param {Function} onPageChange - 页码改变回调
+ * @param {boolean} loading - 加载状态
  */
 const EventScrollList = ({
   events,
@@ -29,7 +34,8 @@ const EventScrollList = ({
   borderColor,
   currentPage,
   totalPages,
-  onPageChange
+  onPageChange,
+  loading = false
 }) => {
   const scrollContainerRef = useRef(null);
   const [showLeftArrow, setShowLeftArrow] = useState(false);
@@ -89,17 +95,6 @@ const EventScrollList = ({
 
   return (
     <Box>
-      {/* 分页控制器 - 右上角 */}
-      {totalPages > 1 && (
-        <Flex justify="flex-end" mb={3}>
-          <PaginationControl
-            currentPage={currentPage}
-            totalPages={totalPages}
-            onPageChange={onPageChange}
-          />
-        </Flex>
-      )}
-
       {/* 横向滚动区域 */}
       <Box position="relative">
         {/* 左侧滚动按钮 */}
@@ -149,6 +144,7 @@ const EventScrollList = ({
         py={4}
         px={2}
         onScroll={handleScroll}
+        position="relative"
         css={{
           '&::-webkit-scrollbar': {
             height: '8px',
@@ -170,6 +166,29 @@ const EventScrollList = ({
           WebkitOverflowScrolling: 'touch',
         }}
       >
+        {/* 加载遮罩 */}
+        {loading && (
+          <Center
+            position="absolute"
+            top={0}
+            left={0}
+            right={0}
+            bottom={0}
+            bg={useColorModeValue('whiteAlpha.800', 'blackAlpha.700')}
+            backdropFilter="blur(2px)"
+            zIndex={10}
+            borderRadius="md"
+          >
+            <VStack>
+              <Spinner size="lg" color="blue.500" thickness="3px" />
+              <Text fontSize="sm" color={useColorModeValue('gray.600', 'gray.300')}>
+                加载中...
+              </Text>
+            </VStack>
+          </Center>
+        )}
+
+        {/* 事件卡片列表 */}
         {events.map((event, index) => (
           <Box
             key={event.id}
@@ -199,6 +218,17 @@ const EventScrollList = ({
         ))}
       </Flex>
       </Box>
+
+      {/* 分页控制器 - 右下角 */}
+      {totalPages > 1 && (
+        <Flex justify="flex-end" mt={3}>
+          <PaginationControl
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={onPageChange}
+          />
+        </Flex>
+      )}
     </Box>
   );
 };

src/views/Community/hooks/useEventFilters.js

@@ -102,17 +102,7 @@ export const useEventFilters = ({ navigate, onEventClick, eventTimelineRef } = {
 
     // 保持现有筛选条件，只更新页码
     updateFilters({ ...filters, page });
-
+  }, [filters, updateFilters, track]);
-    // 滚动到实时事件时间轴（平滑滚动）
-    if (eventTimelineRef && eventTimelineRef.current) {
-      setTimeout(() => {
-        eventTimelineRef.current.scrollIntoView({
-          behavior: 'smooth',  // 平滑滚动
-          block: 'start'       // 滚动到元素顶部
-        });
-      }, 100); // 延迟100ms，确保DOM更新
-    }
-  }, [filters, updateFilters, eventTimelineRef, track]);
 
   // 处理事件点击
   const handleEventClick = useCallback((event) => {

src/views/Community/index.js

@@ -60,6 +60,7 @@ const Community = () => {
   // Ref：用于滚动到实时事件时间轴
   const eventTimelineRef = useRef(null);
   const hasScrolledRef = useRef(false); // 标记是否已滚动
+  const containerRef = useRef(null); // 用于首次滚动到内容区域
 
   // ⚡ 通知权限引导
   const { showCommunityGuide } = useNotification();
@@ -145,6 +146,23 @@ const Community = () => {
     }
   }, [showCommunityGuide]); // 只在组件挂载时执行一次
 
+  // ⚡ 首次进入页面时滚动到内容区域（考虑导航栏高度）
+  useEffect(() => {
+    // 延迟执行，确保DOM已完全渲染
+    const timer = setTimeout(() => {
+      if (containerRef.current) {
+        // 滚动到容器顶部，自动考虑导航栏的高度
+        containerRef.current.scrollIntoView({
+          behavior: 'auto',
+          block: 'start',
+          inline: 'nearest'
+        });
+      }
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, []); // 空依赖数组，只在组件挂载时执行一次
+
   // ⚡ 滚动到实时事件区域（由搜索框聚焦触发）
   const scrollToTimeline = useCallback(() => {
     if (!hasScrolledRef.current && eventTimelineRef.current) {
@@ -161,7 +179,7 @@ const Community = () => {
   return (
     <Box minH="100vh" bg={bgColor}>
       {/* 主内容区域 */}
-      <Container maxW="container.xl" pt={6} pb={8}>
+      <Container ref={containerRef} maxW="container.xl" pt={6} pb={8}>
         {/* 热点事件区域 */}
         <HotEventsSection events={hotEvents} />
 

src/views/EventDetail/index.js

@@ -358,6 +358,9 @@ const EventDetail = () => {
     const { user } = useAuth();
     const { hasFeatureAccess, getUpgradeRecommendation } = useSubscription();
 
+    // 滚动位置管理
+    const scrollPositionRef = useRef(0);
+
     // State hooks
     const [eventData, setEventData] = useState(null);
     const [relatedStocks, setRelatedStocks] = useState([]);
@@ -399,6 +402,16 @@ const EventDetail = () => {
 
     const actualEventId = getEventIdFromPath();
 
+    // 保存当前滚动位置
+    const saveScrollPosition = () => {
+        scrollPositionRef.current = window.scrollY || window.pageYOffset;
+    };
+
+    // 恢复滚动位置
+    const restoreScrollPosition = () => {
+        window.scrollTo(0, scrollPositionRef.current);
+    };
+
     const loadEventData = async () => {
         try {
             setLoading(true);
@@ -540,8 +553,19 @@ const EventDetail = () => {
     // Effect hook - must be called after all state hooks
     useEffect(() => {
         if (actualEventId) {
+            // 保存当前滚动位置
+            saveScrollPosition();
+
             loadEventData();
             loadPosts();
+
+            // 数据加载完成后恢复滚动位置
+            // 使用 setTimeout 确保 DOM 已更新
+            const timer = setTimeout(() => {
+                restoreScrollPosition();
+            }, 100);
+
+            return () => clearTimeout(timer);
         } else {
             setError('无效的事件ID');
             setLoading(false);