src/views/Community/
├── index.js (主组件,150行左右)
├── components/
│ ├── EventTimelineCard.js (新增)
│ ├── EventTimelineHeader.js (新增)
│ ├── EventListSection.js (新增)
│ ├── HotEventsSection.js (新增)
│ ├── EventModals.js (新增)
│ ├── UnifiedSearchBox.js (已有)
│ ├── EventList.js (已有)
│ └── ...
└── hooks/
├── useEventFilters.js (新增)
└── useEventData.js (新增)
64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
// src/views/Community/components/EventModals.js
|
||
// 事件弹窗组合组件(包含详情Modal和股票Drawer)
|
||
|
||
import React from 'react';
|
||
import {
|
||
Modal,
|
||
ModalOverlay,
|
||
ModalContent,
|
||
ModalHeader,
|
||
ModalBody,
|
||
ModalCloseButton
|
||
} from '@chakra-ui/react';
|
||
import EventDetailModal from './EventDetailModal';
|
||
import StockDetailPanel from './StockDetailPanel';
|
||
|
||
/**
|
||
* 事件弹窗组合组件
|
||
* @param {Object} eventModalState - 事件详情Modal状态
|
||
* @param {boolean} eventModalState.isOpen - 是否打开
|
||
* @param {Function} eventModalState.onClose - 关闭回调
|
||
* @param {Object} eventModalState.event - 事件对象
|
||
* @param {Function} eventModalState.onEventClose - 事件关闭回调(清除状态)
|
||
* @param {Object} stockDrawerState - 股票详情Drawer状态
|
||
* @param {boolean} stockDrawerState.visible - 是否显示
|
||
* @param {Object} stockDrawerState.event - 事件对象
|
||
* @param {Function} stockDrawerState.onClose - 关闭回调
|
||
*/
|
||
const EventModals = ({
|
||
eventModalState,
|
||
stockDrawerState
|
||
}) => {
|
||
return (
|
||
<>
|
||
{/* 事件详情模态框 - 使用Chakra UI Modal */}
|
||
<Modal
|
||
isOpen={eventModalState.isOpen}
|
||
onClose={eventModalState.onClose}
|
||
size="xl"
|
||
>
|
||
<ModalOverlay />
|
||
<ModalContent>
|
||
<ModalHeader>事件详情</ModalHeader>
|
||
<ModalCloseButton />
|
||
<ModalBody pb={6}>
|
||
<EventDetailModal
|
||
event={eventModalState.event}
|
||
onClose={eventModalState.onEventClose}
|
||
/>
|
||
</ModalBody>
|
||
</ModalContent>
|
||
</Modal>
|
||
|
||
{/* 股票详情抽屉 - 使用原组件自带的 Antd Drawer */}
|
||
<StockDetailPanel
|
||
visible={stockDrawerState.visible}
|
||
event={stockDrawerState.event}
|
||
onClose={stockDrawerState.onClose}
|
||
/>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default EventModals;
|