From b5d054d89f2dd2a16efa870edc6bc01fa60f8f65 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 4 Dec 2025 16:26:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A6=82=E5=BF=B5=E4=B8=AD=E5=BF=83?=
 =?UTF-8?q?=E5=8E=86=E5=8F=B2=E6=97=B6=E9=97=B4=E8=BD=B4=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?UI=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Concept/ConceptTimelineModal.js | 183 ++++++++++++----------
 1 file changed, 102 insertions(+), 81 deletions(-)

diff --git a/src/views/Concept/ConceptTimelineModal.js b/src/views/Concept/ConceptTimelineModal.js
index ac271ee7..f002838a 100644
--- a/src/views/Concept/ConceptTimelineModal.js
+++ b/src/views/Concept/ConceptTimelineModal.js
@@ -31,6 +31,7 @@ import {
     useDisclosure,
     SimpleGrid,
     Tooltip,
+    useBreakpointValue,
 } from '@chakra-ui/react';
 import {
     ChevronDownIcon,
@@ -111,6 +112,9 @@ const ConceptTimelineModal = ({
     const [selectedNews, setSelectedNews] = useState(null);
     const [isNewsModalOpen, setIsNewsModalOpen] = useState(false);
 
+    // 响应式配置
+    const isMobile = useBreakpointValue({ base: true, md: false }, { fallback: 'md' });
+
     // 辅助函数：格式化日期显示（包含年份）
     const formatDateDisplay = (dateStr) => {
         const date = new Date(dateStr);
@@ -602,37 +606,41 @@ const ConceptTimelineModal = ({
                     onClose={onClose}
                     size="full"
                     scrollBehavior="inside"
+                    isCentered
                 >
                 <ModalOverlay />
-                <ModalContent maxW="1400px" m={4}>
+                <ModalContent maxW="1400px" m={{ base: 0, md: 'auto' }} mx="auto">
                     <ModalHeader
                         bgGradient="linear(135deg, purple.600 0%, purple.500 50%, pink.500 100%)"
                         color="white"
                         position="sticky"
                         top={0}
                         zIndex={10}
-                        py={6}
+                        py={{ base: 3, md: 6 }}
+                        px={{ base: 3, md: 6 }}
                         boxShadow="lg"
                     >
-                        <HStack spacing={4} flexWrap="wrap">
+                        <HStack spacing={{ base: 2, md: 4 }} flexWrap="wrap">
                             <Icon
                                 as={FaChartLine}
-                                boxSize={6}
+                                boxSize={{ base: 4, md: 6 }}
                                 filter="drop-shadow(0 2px 4px rgba(0,0,0,0.2))"
                             />
                             <Text
-                                fontSize="xl"
+                                fontSize={{ base: 'md', md: 'xl' }}
                                 fontWeight="bold"
                                 textShadow="0 2px 4px rgba(0,0,0,0.2)"
+                                noOfLines={1}
+                                maxW={{ base: '120px', md: 'none' }}
                             >
                                 {conceptName} - 历史时间轴
                             </Text>
                             <Badge
                                 colorScheme="yellow"
-                                px={3}
+                                px={{ base: 2, md: 3 }}
                                 py={1}
                                 borderRadius="full"
-                                fontSize="sm"
+                                fontSize={{ base: 'xs', md: 'sm' }}
                                 boxShadow="md"
                             >
                                 最近100天
@@ -640,20 +648,29 @@ const ConceptTimelineModal = ({
                             <Badge
                                 bg="whiteAlpha.300"
                                 color="white"
-                                px={3}
+                                px={{ base: 2, md: 3 }}
                                 py={1}
                                 borderRadius="full"
                                 fontSize="xs"
                                 backdropFilter="blur(10px)"
+                                display={{ base: 'none', sm: 'flex' }}
                             >
                                 🔥 Max版功能
                             </Badge>
                         </HStack>
                     </ModalHeader>
-                    <ModalCloseButton color="white" />
+                    <ModalCloseButton
+                        color="white"
+                        size="lg"
+                        top={{ base: 2, md: 4 }}
+                        right={{ base: 2, md: 4 }}
+                        _hover={{ bg: 'whiteAlpha.300' }}
+                        zIndex={20}
+                    />
 
                     <ModalBody
-                        py={6}
+                        py={{ base: 2, md: 6 }}
+                        px={{ base: 0, md: 6 }}
                         bg="gray.50"
                         css={{
                             '&::-webkit-scrollbar': {
@@ -680,103 +697,116 @@ const ConceptTimelineModal = ({
                                 </VStack>
                             </Center>
                         ) : timelineData.length > 0 ? (
-                            <Box position="relative" maxW="1200px" mx="auto" px={4}>
-                                {/* 图例说明 */}
-                                <Flex justify="center" mb={6} flexWrap="wrap" gap={4}>
+                            <Box position="relative" maxW="1200px" mx="auto" px={{ base: 2, md: 4 }}>
+                                {/* 图例说明 - H5端保持一行 */}
+                                <Flex
+                                    justify="center"
+                                    mb={{ base: 3, md: 6 }}
+                                    flexWrap={{ base: 'nowrap', md: 'wrap' }}
+                                    gap={{ base: 1, md: 4 }}
+                                    overflowX={{ base: 'auto', md: 'visible' }}
+                                    pb={{ base: 2, md: 0 }}
+                                    css={{
+                                        '&::-webkit-scrollbar': { display: 'none' },
+                                        scrollbarWidth: 'none',
+                                    }}
+                                >
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="purple.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="purple.200"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Box w={3} h={3} bg="#9F7AEA" borderRadius="full" boxShadow="sm" />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">📰 新闻</Text>
+                                        <Box w={{ base: 2, md: 3 }} h={{ base: 2, md: 3 }} bg="#9F7AEA" borderRadius="full" />
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">📰 新闻</Text>
                                     </HStack>
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="purple.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="purple.300"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Box w={3} h={3} bg="#805AD5" borderRadius="full" boxShadow="sm" />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">📊 研报</Text>
+                                        <Box w={{ base: 2, md: 3 }} h={{ base: 2, md: 3 }} bg="#805AD5" borderRadius="full" />
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">📊 研报</Text>
                                     </HStack>
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="red.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="red.200"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Icon as={FaArrowUp} color="red.500" boxSize={3} />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">上涨</Text>
+                                        <Icon as={FaArrowUp} color="red.500" boxSize={{ base: 2, md: 3 }} />
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">上涨</Text>
                                     </HStack>
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="green.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="green.200"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Icon as={FaArrowDown} color="green.500" boxSize={3} />
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">下跌</Text>
+                                        <Icon as={FaArrowDown} color="green.500" boxSize={{ base: 2, md: 3 }} />
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">下跌</Text>
                                     </HStack>
                                     <HStack
-                                        spacing={2}
-                                        px={4}
-                                        py={2}
+                                        spacing={{ base: 1, md: 2 }}
+                                        px={{ base: 2, md: 4 }}
+                                        py={{ base: 1, md: 2 }}
                                         bg="orange.50"
                                         borderRadius="lg"
                                         border="1px solid"
                                         borderColor="orange.200"
                                         boxShadow="sm"
-                                        transition="all 0.2s"
-                                        _hover={{ transform: 'translateY(-2px)', boxShadow: 'md' }}
+                                        flexShrink={0}
                                     >
-                                        <Text fontSize="sm" fontWeight="bold">🔥</Text>
-                                        <Text fontSize="sm" fontWeight="medium" color="gray.700">涨3%+</Text>
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="bold">🔥</Text>
+                                        <Text fontSize={{ base: 'xs', md: 'sm' }} fontWeight="medium" color="gray.700" whiteSpace="nowrap">涨3%+</Text>
                                     </HStack>
                                 </Flex>
 
                                 {/* FullCalendar 日历组件 */}
                                 <Box
-                                    height={{ base: '600px', md: '700px' }}
+                                    height={{ base: '500px', md: '700px' }}
                                     bg="white"
-                                    borderRadius="xl"
-                                    boxShadow="lg"
-                                    p={4}
+                                    borderRadius={{ base: 'none', md: 'xl' }}
+                                    boxShadow={{ base: 'none', md: 'lg' }}
+                                    p={{ base: 1, md: 4 }}
                                     sx={{
                                         // FullCalendar 样式定制
                                         '.fc': {
                                             height: '100%',
                                         },
                                         '.fc-header-toolbar': {
-                                            marginBottom: '1.5rem',
+                                            marginBottom: { base: '0.5rem', md: '1.5rem' },
+                                            padding: { base: '0 4px', md: '0' },
+                                            flexWrap: 'nowrap',
+                                            gap: { base: '4px', md: '8px' },
+                                        },
+                                        '.fc-toolbar-chunk': {
+                                            display: 'flex',
+                                            alignItems: 'center',
                                         },
                                         '.fc-toolbar-title': {
-                                            fontSize: '1.5rem',
+                                            fontSize: { base: '1rem', md: '1.5rem' },
                                             fontWeight: 'bold',
                                             color: 'purple.600',
                                         },
@@ -784,6 +814,8 @@ const ConceptTimelineModal = ({
                                             backgroundColor: '#9F7AEA',
                                             borderColor: '#9F7AEA',
                                             color: 'white',
+                                            padding: { base: '4px 8px', md: '6px 12px' },
+                                            fontSize: { base: '12px', md: '14px' },
                                             '&:hover': {
                                                 backgroundColor: '#805AD5',
                                                 borderColor: '#805AD5',
@@ -806,14 +838,18 @@ const ConceptTimelineModal = ({
                                             },
                                         },
                                         '.fc-daygrid-day-number': {
-                                            padding: '4px',
-                                            fontSize: '0.875rem',
+                                            padding: { base: '2px', md: '4px' },
+                                            fontSize: { base: '0.75rem', md: '0.875rem' },
+                                        },
+                                        '.fc-col-header-cell-cushion': {
+                                            fontSize: { base: '0.75rem', md: '0.875rem' },
+                                            padding: { base: '4px 2px', md: '8px' },
                                         },
                                         '.fc-event': {
                                             cursor: 'pointer',
                                             border: 'none',
-                                            padding: '2px 4px',
-                                            fontSize: '0.75rem',
+                                            padding: { base: '1px 2px', md: '2px 4px' },
+                                            fontSize: { base: '0.65rem', md: '0.75rem' },
                                             fontWeight: 'bold',
                                             borderRadius: '4px',
                                             transition: 'all 0.2s',
@@ -823,7 +859,13 @@ const ConceptTimelineModal = ({
                                             },
                                         },
                                         '.fc-daygrid-event-harness': {
-                                            marginBottom: '2px',
+                                            marginBottom: { base: '1px', md: '2px' },
+                                        },
+                                        // H5 端隐藏事件文字，只显示色块
+                                        '@media (max-width: 768px)': {
+                                            '.fc-event-title': {
+                                                fontSize: '0.6rem',
+                                            },
                                         },
                                     }}
                                 >
@@ -882,32 +924,11 @@ const ConceptTimelineModal = ({
                         )}
 
                         {/* 风险提示 */}
-                        <Box px={6}>
+                        <Box px={{ base: 2, md: 6 }}>
                             <RiskDisclaimer variant="default" />
                         </Box>
                     </ModalBody>
 
-                    <ModalFooter
-                        borderTop="2px solid"
-                        borderColor="purple.100"
-                        bg="gray.50"
-                        py={4}
-                    >
-                        <Button
-                            colorScheme="purple"
-                            size="lg"
-                            px={8}
-                            onClick={onClose}
-                            boxShadow="md"
-                            _hover={{
-                                transform: 'translateY(-2px)',
-                                boxShadow: 'lg',
-                            }}
-                            transition="all 0.2s"
-                        >
-                            关闭
-                        </Button>
-                    </ModalFooter>
                 </ModalContent>
             </Modal>
             )}