Files
vf_react/src/views/Community/components/EventDetailModal.tsx
zdl b1d5b217d3 refactor: 事件详情弹窗改用 Drawer 组件从底部弹出
- EventDetailModal: Modal 替换为 Drawer,placement="bottom"
- 使用 destroyOnHidden 替代已弃用的 destroyOnClose
- 关闭按钮改用 CloseOutlined 图标,移到右上角
- 简化 Less 文件,删除与 TSX styles 属性重复的配置
- BytedeskWidget: H5 端降低 z-index,避免遮挡发布按钮

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 15:45:48 +08:00

62 lines
1.7 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 './DynamicNewsDetail/DynamicNewsDetailPanel';
import './EventDetailModal.less';
interface EventDetailModalProps {
/** 是否打开弹窗 */
open: boolean;
/** 关闭弹窗回调 */
onClose: () => void;
/** 事件对象 */
event: any; // TODO: 后续可替换为具体的 Event 类型
}
/**
* 事件详情抽屉组件(从底部弹出)
*/
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"
closeIcon={null}
extra={
<CloseOutlined
onClick={onClose}
style={{ cursor: 'pointer', fontSize: 16, color: '#4A5568' }}
/>
}
styles={{
wrapper: isMobile ? {} : {
maxWidth: 1400,
margin: '0 auto',
borderRadius: '16px 16px 0 0',
},
content: { borderRadius: '16px 16px 0 0' },
header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px' },
body: { padding: 0, background: '#FFFFFF' },
}}
>
{event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
</Drawer>
);
};
export default EventDetailModal;