feat: 热门事件点击打开弹窗

src/views/Community/components/HotEvents.js

@@ -2,10 +2,19 @@
 import React, { useState } from 'react';
 import { Card, Badge, Tag, Empty, Carousel, Tooltip } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
-import { useNavigate } from 'react-router-dom';
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  useDisclosure
+} from '@chakra-ui/react';
 import moment from 'moment';
 import './HotEvents.css';
-import defaultEventImage from '../../../assets/img/default-event.jpg'
+import defaultEventImage from '../../../assets/img/default-event.jpg';
+import DynamicNewsDetailPanel from './DynamicNewsDetail';
 
 // 自定义箭头组件
 const CustomArrow = ({ className, style, onClick, direction }) => {
@@ -27,8 +36,9 @@ const CustomArrow = ({ className, style, onClick, direction }) => {
 };
 
 const HotEvents = ({ events, onPageChange }) => {
-    const navigate = useNavigate();
     const [currentSlide, setCurrentSlide] = useState(0);
+    const { isOpen: isModalOpen, onOpen: onModalOpen, onClose: onModalClose } = useDisclosure();
+    const [modalEvent, setModalEvent] = useState(null);
 
     const renderPriceChange = (value) => {
         if (value === null || value === undefined) {
@@ -56,8 +66,9 @@ const HotEvents = ({ events, onPageChange }) => {
         return colors[importance] || 'default';
     };
 
-    const handleCardClick = (eventId) => {
-        navigate(`/event-detail/${eventId}`);
+    const handleCardClick = (event) => {
+        setModalEvent(event);
+        onModalOpen();
     };
 
     // 计算总页数
@@ -117,7 +128,7 @@ const HotEvents = ({ events, onPageChange }) => {
                             <Card
                                 hoverable
                                 className="hot-event-card"
-                                onClick={() => handleCardClick(event.id)}
+                                onClick={() => handleCardClick(event)}
                                 cover={
                                     <div className="event-cover">
                                         <img
@@ -173,6 +184,22 @@ const HotEvents = ({ events, onPageChange }) => {
                     <Empty description="暂无热点信息" />
                 </Card>
             )}
+
+            {/* 事件详情弹窗 - 使用 Chakra UI Modal（与平铺模式一致） */}
+            {isModalOpen ? (
+                <Modal isOpen={isModalOpen} onClose={onModalClose} size="6xl" scrollBehavior="inside">
+                    <ModalOverlay />
+                    <ModalContent>
+                        <ModalHeader>
+                            {modalEvent?.title || '事件详情'}
+                        </ModalHeader>
+                        <ModalCloseButton />
+                        <ModalBody pb={6}>
+                            {modalEvent && <DynamicNewsDetailPanel event={modalEvent} />}
+                        </ModalBody>
+                    </ModalContent>
+                </Modal>
+            ): null}
         </div>
     );
 };