feat: 概念中心历史时间轴弹窗UI调整
This commit is contained in:
zdl
@@ -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>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user