feat: 提取 EventDetailScrollPanel

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

@@ -2,10 +2,10 @@
 // 纵向分栏模式布局组件
 
 import React from 'react';
-import { Box, Grid, GridItem, Center, VStack, Text } from '@chakra-ui/react';
+import { Grid, GridItem } from '@chakra-ui/react';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
-import DynamicNewsDetailPanel from '../DynamicNewsDetail';
 import VirtualizedFourRowGrid from './VirtualizedFourRowGrid';
+import EventDetailScrollPanel from './EventDetailScrollPanel';
 
 /**
  * 纵向分栏模式布局
@@ -67,42 +67,12 @@ const VerticalModeLayout = ({
 
       {/* 右侧：事件详情 (66.7%) */}
       <GridItem h="100%">
-        <Box
-          pl={2}
-          position="relative"
-          sx={{
-            height: '100% !important',
-            maxHeight: '800px !important',
-            overflowY: 'scroll !important',
-            overflowX: 'hidden !important',
-            '&::-webkit-scrollbar': {
-              width: '3px',
-            },
-            '&::-webkit-scrollbar-track': {
-              background: scrollbarTrackBg,
-              borderRadius: '10px',
-            },
-            '&::-webkit-scrollbar-thumb': {
-              background: scrollbarThumbBg,
-              borderRadius: '10px',
-            },
-            '&::-webkit-scrollbar-thumb:hover': {
-              background: scrollbarThumbHoverBg,
-            },
-          }}
-        >
-          {selectedEvent ? (
-            <DynamicNewsDetailPanel event={selectedEvent} />
-          ) : (
-            <Center h="100%" minH="400px">
-              <VStack spacing={4}>
-                <Text fontSize="lg" color="gray.500">
-                  请选择左侧事件查看详情
-                </Text>
-              </VStack>
-            </Center>
-          )}
-        </Box>
+        <EventDetailScrollPanel
+          selectedEvent={selectedEvent}
+          scrollbarTrackBg={scrollbarTrackBg}
+          scrollbarThumbBg={scrollbarThumbBg}
+          scrollbarThumbHoverBg={scrollbarThumbHoverBg}
+        />
       </GridItem>
     </Grid>
   );