vf/vf_react
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 概念中心历史时间轴弹窗UI调整

Browse Source
This commit is contained in:
zdl
2025-12-04 16:26:52 +08:00
parent b66c1585f7
commit b5d054d89f
1 changed files with 102 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

183
src/views/Concept/ConceptTimelineModal.js
View File

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