feat: 提取 EventDetailScrollPanel

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

@@ -0,0 +1,63 @@
+// src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js
+// 事件详情滚动面板组件
+
+import React from 'react';
+import { Box, Center, VStack, Text } from '@chakra-ui/react';
+import DynamicNewsDetailPanel from '../DynamicNewsDetail';
+
+/**
+ * 事件详情滚动面板
+ * 带自定义滚动条样式的事件详情容器
+ *
+ * @param {Object} selectedEvent - 当前选中的事件
+ * @param {string} scrollbarTrackBg - 滚动条轨道背景色
+ * @param {string} scrollbarThumbBg - 滚动条滑块背景色
+ * @param {string} scrollbarThumbHoverBg - 滚动条滑块悬浮背景色
+ */
+const EventDetailScrollPanel = ({
+  selectedEvent,
+  scrollbarTrackBg,
+  scrollbarThumbBg,
+  scrollbarThumbHoverBg,
+}) => {
+  return (
+    <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>
+  );
+};
+
+export default 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
+        <EventDetailScrollPanel
-          pl={2}
+          selectedEvent={selectedEvent}
-          position="relative"
+          scrollbarTrackBg={scrollbarTrackBg}
-          sx={{
+          scrollbarThumbBg={scrollbarThumbBg}
-            height: '100% !important',
+          scrollbarThumbHoverBg={scrollbarThumbHoverBg}
-            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>
       </GridItem>
     </Grid>
   );