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/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>
   );
 };