From cb44c18e570be9bc1da466db9729ad7ebca9f39c Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 5 Nov 2025 17:01:19 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=83=AD=E9=97=A8=E4=BA=8B=E4=BB=B6?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E6=89=93=E5=BC=80=E5=BC=B9=E7=AA=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Community/components/HotEvents.js | 39 +++++++++++++++++----
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/views/Community/components/HotEvents.js b/src/views/Community/components/HotEvents.js
index f26a51c4..39077442 100644
--- a/src/views/Community/components/HotEvents.js
+++ b/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>
     );
 };