15f5c445c5
## 目录重构 - DynamicNewsCard/ → DynamicNews/（含 layouts/, hooks/ 子目录） - EventCard 原子组件 → EventCard/atoms/ - EventDetailModal 独立目录化 - HotEvents 独立目录化（含 CSS） - SearchFilters 独立目录化（CompactSearchBox, TradingTimeFilter） ## 导入路径修复 - EventCard/*.js: 统一使用 @constants/, @utils/, @components/ 别名 - atoms/*.js: 修复移动后的相对路径问题 - DynamicNewsCard.js: 更新 contexts, store, constants 导入 - EventHeaderInfo.js, CompactMetaBar.js: 修复 EventFollowButton 导入 ## Mock Handler 添加 - /api/events/:eventId/expectation-score - 事件超预期得分 - /api/index/:indexCode/realtime - 指数实时行情 ## 警告修复 - CitationMark.js: overlayInnerStyle → styles (Antd 5.x) - CitedContent.js: 移除不支持的 jsx 属性 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
2.2 KiB
JavaScript
73 lines
2.2 KiB
JavaScript
// src/views/Community/components/DynamicNews/EventDetailScrollPanel.js
|
||
// 事件详情滚动面板组件
|
||
|
||
import React from 'react';
|
||
import { Box, Center, VStack, Text } from '@chakra-ui/react';
|
||
import DynamicNewsDetailPanel from '@components/EventDetailPanel';
|
||
|
||
/**
|
||
* 事件详情滚动面板
|
||
* 带自定义滚动条样式的事件详情容器
|
||
*
|
||
* @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;
|