From a1aa6718e6b77be67a9f460764f06e2f1e2b78a9 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 27 Nov 2025 15:08:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BA=8B=E4=BB=B6=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97UI=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Community/components/DynamicNewsCard.js   |  2 +-
 .../DynamicNewsCard/VerticalModeLayout.js     | 27 +++--------
 .../components/EventDetailModal.less          | 36 ++++++++++++++
 .../Community/components/EventDetailModal.tsx | 48 +++++++++++++++++++
 src/views/Community/components/HotEvents.js   | 33 ++++---------
 5 files changed, 99 insertions(+), 47 deletions(-)
 create mode 100644 src/views/Community/components/EventDetailModal.less
 create mode 100644 src/views/Community/components/EventDetailModal.tsx

diff --git a/src/views/Community/components/DynamicNewsCard.js b/src/views/Community/components/DynamicNewsCard.js
index 229973b1..67897c08 100644
--- a/src/views/Community/components/DynamicNewsCard.js
+++ b/src/views/Community/components/DynamicNewsCard.js
@@ -543,7 +543,7 @@ const [currentMode, setCurrentMode] = useState('vertical');
           <Flex justify="space-between" align="center">
             {/* 左侧：标题 + 模式切换按钮 */}
             <HStack spacing={4}>
-              <Heading size="md" color={PROFESSIONAL_COLORS.text.primary}>
+              <Heading size={isMobile ? "sm" : "md"} color={PROFESSIONAL_COLORS.text.primary}>
                 <HStack spacing={2}>
                   <TimeIcon color={PROFESSIONAL_COLORS.gold[500]} />
                   <Text bgGradient={PROFESSIONAL_COLORS.gradients.gold} bgClip="text">实时要闻·动态追踪</Text>
diff --git a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
index 3101718d..abe9723e 100644
--- a/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
+++ b/src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js
@@ -9,18 +9,12 @@ import {
   Center,
   Text,
   useBreakpointValue,
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
   useDisclosure
 } from '@chakra-ui/react';
 import { InfoIcon } from '@chakra-ui/icons';
 import HorizontalDynamicNewsEventCard from '../EventCard/HorizontalDynamicNewsEventCard';
 import EventDetailScrollPanel from './EventDetailScrollPanel';
-import DynamicNewsDetailPanel from '../DynamicNewsDetail/DynamicNewsDetailPanel';
+import EventDetailModal from '../EventDetailModal';
 
 /**
  * 纵向分栏模式布局
@@ -165,20 +159,11 @@ const VerticalModeLayout = React.memo(({
 
       {/* 移动端详情弹窗 */}
       {isMobile && (
-        <Modal isOpen={isMobileModalOpen} onClose={onMobileModalClose} size="full" scrollBehavior="inside">
-          <ModalOverlay bg="blackAlpha.800" backdropFilter="blur(10px)" />
-          <ModalContent maxW="100vw" m={0} borderRadius={0}>
-            <ModalHeader bg="gray.900" color="white" borderBottom="1px solid" borderColor="gray.700">
-              {mobileSelectedEvent?.title || '事件详情'}
-            </ModalHeader>
-            <ModalCloseButton color="white" />
-            <ModalBody p={0} bg="gray.900">
-              {mobileSelectedEvent && (
-                <DynamicNewsDetailPanel event={mobileSelectedEvent} showHeader={false} />
-              )}
-            </ModalBody>
-          </ModalContent>
-        </Modal>
+        <EventDetailModal
+          open={isMobileModalOpen}
+          onClose={onMobileModalClose}
+          event={mobileSelectedEvent}
+        />
       )}
     </Flex>
   );
diff --git a/src/views/Community/components/EventDetailModal.less b/src/views/Community/components/EventDetailModal.less
new file mode 100644
index 00000000..c448bed8
--- /dev/null
+++ b/src/views/Community/components/EventDetailModal.less
@@ -0,0 +1,36 @@
+.event-detail-modal {
+  top: 20% !important;
+  margin: 0 auto !important;
+  padding-bottom: 0 !important;
+
+  .ant-modal-content {
+    border-radius: 24px !important;
+    background: transparent;
+  }
+
+  // 标题样式 - 深色文字（白色背景）
+  .ant-modal-title {
+    color: #1A202C;
+  }
+
+  // 关闭按钮样式 - 深色（白色背景）
+  .ant-modal-close {
+    color: #4A5568;
+
+    &:hover {
+      color: #1A202C;
+    }
+  }
+}
+
+// 自底向上滑入动画
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
diff --git a/src/views/Community/components/EventDetailModal.tsx b/src/views/Community/components/EventDetailModal.tsx
new file mode 100644
index 00000000..2122a937
--- /dev/null
+++ b/src/views/Community/components/EventDetailModal.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Modal } from 'antd';
+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 (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      title={event?.title || '事件详情'}
+      width='100vw'
+      destroyOnClose
+      className="event-detail-modal"
+      styles={{
+        mask: { background: 'transparent' },
+        content: { borderRadius: 24, padding: 0, maxWidth: 1400, background: 'transparent', margin: '0 auto' },
+        header: { background: '#FFFFFF', borderBottom: '1px solid #E2E8F0', padding: '16px 24px', borderRadius: '24px 24px 0 0' },
+        body: { padding: 0 },
+      }}
+    >
+      {event && <DynamicNewsDetailPanel event={event} showHeader={false} />}
+    </Modal>
+  );
+};
+
+export default EventDetailModal;
diff --git a/src/views/Community/components/HotEvents.js b/src/views/Community/components/HotEvents.js
index 8d7411d8..cd403793 100644
--- a/src/views/Community/components/HotEvents.js
+++ b/src/views/Community/components/HotEvents.js
@@ -2,19 +2,11 @@
 import React, { useState } from 'react';
 import { Card, Badge, Tag, Empty, Carousel, Tooltip } from 'antd';
 import { ArrowUpOutlined, ArrowDownOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
-import {
-  Modal,
-  ModalOverlay,
-  ModalContent,
-  ModalHeader,
-  ModalBody,
-  ModalCloseButton,
-  useDisclosure
-} from '@chakra-ui/react';
+import { useDisclosure } from '@chakra-ui/react';
+import EventDetailModal from './EventDetailModal';
 import dayjs from 'dayjs';
 import './HotEvents.css';
 import defaultEventImage from '../../../assets/img/default-event.jpg';
-import DynamicNewsDetailPanel from './DynamicNewsDetail';
 
 // 自定义箭头组件
 const CustomArrow = ({ className, style, onClick, direction }) => {
@@ -196,21 +188,12 @@ const HotEvents = ({ events, onPageChange, onEventClick }) => {
                 </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}
+            {/* 事件详情弹窗 */}
+            <EventDetailModal
+                open={isModalOpen}
+                onClose={onModalClose}
+                event={modalEvent}
+            />
         </div>
     );
 };