84 lines
2.2 KiB
TypeScript
84 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { useSelector } from 'react-redux';
|
|
import { Drawer } from 'antd';
|
|
import { CloseOutlined } from '@ant-design/icons';
|
|
import { selectIsMobile } from '@store/slices/deviceSlice';
|
|
import DynamicNewsDetailPanel from '@components/EventDetailPanel';
|
|
import './EventDetailModal.less';
|
|
|
|
interface EventDetailModalProps {
|
|
/** 是否打开弹窗 */
|
|
open: boolean;
|
|
/** 关闭弹窗回调 */
|
|
onClose: () => void;
|
|
/** 事件对象 */
|
|
event: any; // TODO: 后续可替换为具体的 Event 类型
|
|
}
|
|
|
|
// 深色主题颜色 - 比背景亮，形成层次感（使用实色确保覆盖）
|
|
const GLASS_THEME = {
|
|
bg: '#2D3748',
|
|
headerBg: '#3D4A5C',
|
|
borderColor: 'rgba(255, 255, 255, 0.12)',
|
|
textColor: '#F7FAFC',
|
|
secondaryText: '#CBD5E0',
|
|
};
|
|
|
|
/**
|
|
* 事件详情抽屉组件（从底部弹出）- 深色毛玻璃风格
|
|
*/
|
|
const EventDetailModal: React.FC<EventDetailModalProps> = ({
|
|
open,
|
|
onClose,
|
|
event,
|
|
}) => {
|
|
const isMobile = useSelector(selectIsMobile);
|
|
|
|
return (
|
|
<Drawer
|
|
open={open}
|
|
onClose={onClose}
|
|
placement="bottom"
|
|
height={isMobile ? 'calc(100vh - 60px)' : 'calc(100vh - 100px)'}
|
|
width={isMobile ? '100%' : '70vw'}
|
|
title={event?.title || '事件详情'}
|
|
destroyOnHidden
|
|
rootClassName="event-detail-drawer event-detail-drawer-dark"
|
|
closeIcon={null}
|
|
extra={
|
|
<CloseOutlined
|
|
onClick={onClose}
|
|
style={{ cursor: 'pointer', fontSize: 18, color: GLASS_THEME.textColor }}
|
|
/>
|
|
}
|
|
styles={{
|
|
wrapper: isMobile ? {} : {
|
|
maxWidth: 1400,
|
|
margin: '0 auto',
|
|
},
|
|
mask: {
|
|
background: 'rgba(0, 0, 0, 0.5)',
|
|
},
|
|
content: {
|
|
borderRadius: '16px 16px 0 0',
|
|
background: GLASS_THEME.bg,
|
|
border: 'none',
|
|
},
|
|
header: {
|
|
background: GLASS_THEME.headerBg,
|
|
borderBottom: `1px solid ${GLASS_THEME.borderColor}`,
|
|
borderRadius: '16px 16px 0 0',
|
|
},
|
|
body: {
|
|
padding: 0,
|
|
background: GLASS_THEME.bg,
|
|
},
|
|
}}
|
|
>
|
|
{event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
|
|
</Drawer>
|
|
);
|
|
};
|
|
|
|
export default EventDetailModal;
|