feat: 提取 EventDetailScrollPanel

2025-11-05 14:00:22 +08:00
parent 327cfc09e2
commit b6862aff4f
2 changed files with 71 additions and 38 deletions
--- a/src/views/Community/components/DynamicNewsCard/EventDetailScrollPanel.js
+++ b/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;