- 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>
62 lines
1.7 KiB
TypeScript
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;
|