update ui

src/views/Community/components/DynamicNewsCard/VerticalModeLayout.js

@@ -2,10 +2,25 @@
 // 纵向分栏模式布局组件
 
 import React, { useState } from 'react';
-import { Box, VStack, Flex, Center, Text, useBreakpointValue } from '@chakra-ui/react';
+import {
+  Box,
+  VStack,
+  Flex,
+  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';
 
 /**
  * 纵向分栏模式布局
@@ -38,6 +53,20 @@ const VerticalModeLayout = ({
   const flexDirection = useBreakpointValue({ base: 'column', lg: 'row' });
   const gap = useBreakpointValue({ base: 3, lg: 6 });
 
+  // 移动端模态框控制
+  const { isOpen: isMobileModalOpen, onOpen: onMobileModalOpen, onClose: onMobileModalClose } = useDisclosure();
+  const [mobileSelectedEvent, setMobileSelectedEvent] = useState(null);
+
+  // 处理移动端事件点击
+  const handleMobileEventClick = (event) => {
+    if (isMobile) {
+      setMobileSelectedEvent(event);
+      onMobileModalOpen();
+    } else {
+      onEventSelect(event);
+    }
+  };
+
   // 固定布局比例：左侧（4），右侧（6）- 平衡布局，确保左侧有足够空间显示内容
   const leftFlex = '4';
   const rightFlex = '6';
@@ -89,7 +118,7 @@ const VerticalModeLayout = ({
                   key={event.id}
                   event={event}
                   isSelected={selectedEvent?.id === event.id}
-                  onEventClick={() => onEventSelect(event)}
+                  onEventClick={() => handleMobileEventClick(event)}
                   isFollowing={eventFollowStatus[event.id]?.isFollowing}
                   followerCount={eventFollowStatus[event.id]?.followerCount}
                   onToggleFollow={onToggleFollow}
@@ -133,6 +162,24 @@ const VerticalModeLayout = ({
           />
         </Box>
       )}
+
+      {/* 移动端详情弹窗 */}
+      {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>
+      )}
     </Flex>
   );
 };