73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
// 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 - 滚动条滑块悬浮背景色
|
||
* @param {string} detailMode - 详情模式：'full' | 'no-header'（默认 'full'）
|
||
* @param {boolean} showHeader - 是否显示头部（可选，优先级高于 detailMode）
|
||
*/
|
||
const EventDetailScrollPanel = ({
|
||
selectedEvent,
|
||
scrollbarTrackBg,
|
||
scrollbarThumbBg,
|
||
scrollbarThumbHoverBg,
|
||
detailMode = 'full',
|
||
showHeader,
|
||
}) => {
|
||
// 计算是否显示头部：showHeader 显式指定时优先，否则根据 detailMode 判断
|
||
const shouldShowHeader = showHeader !== undefined
|
||
? showHeader
|
||
: detailMode === 'full';
|
||
return (
|
||
<Box
|
||
pl={2}
|
||
position="relative"
|
||
data-detail-panel-container="true"
|
||
sx={{
|
||
height: '100%',
|
||
overflowY: 'auto',
|
||
overflowX: 'hidden',
|
||
overscrollBehavior: 'contain',
|
||
'&::-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} showHeader={shouldShowHeader} />
|
||
) : (
|
||
<Center h="100%" minH="400px">
|
||
<VStack spacing={4}>
|
||
<Text fontSize="lg" color="gray.500">
|
||
请选择左侧事件查看详情
|
||
</Text>
|
||
</VStack>
|
||
</Center>
|
||
)}
|
||
</Box>
|
||
);
|
||
};
|
||
|
||
export default EventDetailScrollPanel;
|