From 0bcf6a93f7b09d13cb79e18e8d4bb74018f09528 Mon Sep 17 00:00:00 2001
From: zzlgreat <zzlgreat@gmail.com>
Date: Sun, 23 Nov 2025 12:21:19 +0800
Subject: [PATCH] update pay function

---
 src/views/Concept/ConceptTimelineModal.js | 501 ++++++++++------------
 1 file changed, 237 insertions(+), 264 deletions(-)

diff --git a/src/views/Concept/ConceptTimelineModal.js b/src/views/Concept/ConceptTimelineModal.js
index b876d28c..379a8a71 100644
--- a/src/views/Concept/ConceptTimelineModal.js
+++ b/src/views/Concept/ConceptTimelineModal.js
@@ -535,148 +535,283 @@ const ConceptTimelineModal = ({
                                 </VStack>
                             </Center>
                         ) : timelineData.length > 0 ? (
-                            <Box position="relative" maxW="1200px" mx="auto">
-                                {/* 时间轴主线 */}
-                                <Box
-                                    position="absolute"
-                                    left="50%"
-                                    transform="translateX(-50%)"
-                                    top={0}
-                                    bottom={0}
-                                    width="2px"
-                                    bgGradient="linear(to-b, purple.200, pink.200)"
-                                    zIndex={0}
-                                />
-
-                                <VStack spacing={0} align="stretch" position="relative">
+                            <Box position="relative" maxW="1000px" mx="auto" px={4}>
+                                <VStack spacing={6} align="stretch" position="relative">
                                     {timelineData.map((item, index) => {
                                         const priceInfo = getPriceInfo(item.price);
                                         const hasEvents = item.events.length > 0;
                                         const isExpanded = expandedDates[item.date];
+                                        const isLeft = index % 2 === 0; // 偶数项在左，奇数项在右
 
                                         return (
                                             <Box key={`${item.date}-${index}`} position="relative">
                                                 <Flex
-                                                    align="center"
-                                                    py={4}
+                                                    direction={isLeft ? 'row' : 'row-reverse'}
+                                                    align="flex-start"
                                                     position="relative"
-                                                    _hover={{ bg: 'white' }}
-                                                    transition="all 0.2s"
-                                                    borderRadius="lg"
-                                                    px={4}
+                                                    gap={4}
                                                 >
-                                                    {/* 左侧 - 涨跌幅信息 */}
+                                                    {/* 内容区域 */}
                                                     <Box
                                                         flex={1}
-                                                        pr={8}
-                                                        textAlign="right"
+                                                        maxW="450px"
+                                                        bg="white"
+                                                        p={5}
+                                                        borderRadius="xl"
+                                                        boxShadow="lg"
+                                                        border="2px solid"
+                                                        borderColor={hasEvents ? 'purple.200' : 'gray.200'}
+                                                        position="relative"
+                                                        _hover={{
+                                                            transform: 'translateY(-4px)',
+                                                            boxShadow: '2xl',
+                                                            borderColor: hasEvents ? 'purple.400' : 'gray.300'
+                                                        }}
+                                                        transition="all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+                                                        _before={{
+                                                            content: '""',
+                                                            position: 'absolute',
+                                                            top: '20px',
+                                                            [isLeft ? 'right' : 'left']: '-12px',
+                                                            width: 0,
+                                                            height: 0,
+                                                            borderStyle: 'solid',
+                                                            borderWidth: isLeft ? '12px 12px 12px 0' : '12px 0 12px 12px',
+                                                            borderColor: isLeft
+                                                                ? `transparent ${hasEvents ? 'var(--chakra-colors-purple-200)' : 'var(--chakra-colors-gray-200)'} transparent transparent`
+                                                                : `transparent transparent transparent ${hasEvents ? 'var(--chakra-colors-purple-200)' : 'var(--chakra-colors-gray-200)'}`
+                                                        }}
                                                     >
-                                                        <VStack align="end" spacing={2}>
-                                                            <Text
-                                                                fontSize="sm"
-                                                                fontWeight="bold"
-                                                                color="gray.700"
-                                                            >
-                                                                {formatDateDisplay(item.date)}
-                                                            </Text>
-
-                                                            {item.price && (
-                                                                <Box
-                                                                    bg="white"
-                                                                    px={4}
-                                                                    py={2}
+                                                        <VStack align="stretch" spacing={3}>
+                                                            {/* 日期标签 */}
+                                                            <HStack justify="space-between" flexWrap="wrap">
+                                                                <Badge
+                                                                    colorScheme="purple"
+                                                                    variant="subtle"
+                                                                    px={3}
+                                                                    py={1}
                                                                     borderRadius="full"
-                                                                    boxShadow="sm"
-                                                                    border="1px solid"
-                                                                    borderColor={`${priceInfo.color}.200`}
+                                                                    fontSize="xs"
+                                                                    fontWeight="bold"
                                                                 >
-                                                                    <HStack spacing={2}>
-                                                                        {priceInfo.icon && (
-                                                                            <Icon
-                                                                                as={priceInfo.icon}
-                                                                                color={`${priceInfo.color}.500`}
-                                                                                boxSize={4}
-                                                                            />
-                                                                        )}
-                                                                        <Text
-                                                                            fontWeight="bold"
-                                                                            fontSize="md"
-                                                                            color={`${priceInfo.color}.600`}
-                                                                        >
-                                                                            {priceInfo.text}
-                                                                        </Text>
-                                                                    </HStack>
+                                                                    {formatDateDisplay(item.date)}
+                                                                </Badge>
 
-                                                                    {item.price.stock_count && (
-                                                                        <Text
-                                                                            fontSize="xs"
-                                                                            color="gray.500"
-                                                                            mt={1}
-                                                                        >
-                                                                            统计股票: {item.price.stock_count} 只
-                                                                        </Text>
-                                                                    )}
-                                                                </Box>
+                                                                {item.price && (
+                                                                    <Badge
+                                                                        colorScheme={priceInfo.color}
+                                                                        variant="solid"
+                                                                        px={3}
+                                                                        py={1}
+                                                                        borderRadius="full"
+                                                                        fontSize="sm"
+                                                                    >
+                                                                        <HStack spacing={1}>
+                                                                            {priceInfo.icon && (
+                                                                                <Icon as={priceInfo.icon} boxSize={3} />
+                                                                            )}
+                                                                            <Text>{priceInfo.text}</Text>
+                                                                        </HStack>
+                                                                    </Badge>
+                                                                )}
+                                                            </HStack>
+
+                                                            {/* 股票数量 */}
+                                                            {item.price && item.price.stock_count && (
+                                                                <Text fontSize="xs" color="gray.600">
+                                                                    📊 统计股票: {item.price.stock_count} 只
+                                                                </Text>
                                                             )}
 
-                                                            {!item.price && !hasEvents && (
-                                                                <Text fontSize="xs" color="gray.400" fontStyle="italic">
-                                                                    当日无数据
+                                                            {/* 事件信息 */}
+                                                            {hasEvents ? (
+                                                                <Box>
+                                                                    <Button
+                                                                        size="sm"
+                                                                        variant="ghost"
+                                                                        colorScheme="purple"
+                                                                        width="full"
+                                                                        justifyContent="space-between"
+                                                                        rightIcon={
+                                                                            <Icon
+                                                                                as={isExpanded ? ChevronDownIcon : ChevronRightIcon}
+                                                                                transition="transform 0.2s"
+                                                                            />
+                                                                        }
+                                                                        onClick={() => toggleDateExpand(item.date)}
+                                                                    >
+                                                                        <HStack spacing={2} fontSize="sm">
+                                                                            {item.events.filter(e => e.type === 'news').length > 0 && (
+                                                                                <Badge colorScheme="blue" variant="solid">
+                                                                                    📰 {item.events.filter(e => e.type === 'news').length}
+                                                                                </Badge>
+                                                                            )}
+                                                                            {item.events.filter(e => e.type === 'report').length > 0 && (
+                                                                                <Badge colorScheme="green" variant="solid">
+                                                                                    📊 {item.events.filter(e => e.type === 'report').length}
+                                                                                </Badge>
+                                                                            )}
+                                                                        </HStack>
+                                                                    </Button>
+
+                                                                    <Collapse in={isExpanded} animateOpacity>
+                                                                        <VStack
+                                                                            align="stretch"
+                                                                            spacing={3}
+                                                                            mt={3}
+                                                                            maxH="300px"
+                                                                            overflowY="auto"
+                                                                            css={{
+                                                                                '&::-webkit-scrollbar': { width: '6px' },
+                                                                                '&::-webkit-scrollbar-track': { background: '#f1f1f1', borderRadius: '10px' },
+                                                                                '&::-webkit-scrollbar-thumb': { background: '#c1c1c1', borderRadius: '10px' },
+                                                                                '&::-webkit-scrollbar-thumb:hover': { background: '#a8a8a8' }
+                                                                            }}
+                                                                        >
+                                                                            {item.events.map((event, eventIdx) => (
+                                                                                <Box
+                                                                                    key={eventIdx}
+                                                                                    p={3}
+                                                                                    bg={event.type === 'news' ? 'blue.50' : 'green.50'}
+                                                                                    borderRadius="md"
+                                                                                    borderLeft="3px solid"
+                                                                                    borderLeftColor={event.type === 'news' ? 'blue.400' : 'green.400'}
+                                                                                    _hover={{ transform: 'translateX(4px)' }}
+                                                                                    transition="all 0.2s"
+                                                                                >
+                                                                                    <VStack align="start" spacing={2}>
+                                                                                        <HStack spacing={2} flexWrap="wrap">
+                                                                                            <Badge
+                                                                                                colorScheme={event.type === 'news' ? 'blue' : 'green'}
+                                                                                                variant="solid"
+                                                                                            >
+                                                                                                {event.type === 'news' ? '新闻' : '研报'}
+                                                                                            </Badge>
+                                                                                            {event.source && (
+                                                                                                <Badge variant="subtle">{event.source}</Badge>
+                                                                                            )}
+                                                                                            {event.publisher && (
+                                                                                                <Badge colorScheme="purple" variant="subtle">
+                                                                                                    {event.publisher}
+                                                                                                </Badge>
+                                                                                            )}
+                                                                                            {event.rating && (
+                                                                                                <Badge colorScheme="orange" variant="solid">
+                                                                                                    {event.rating}
+                                                                                                </Badge>
+                                                                                            )}
+                                                                                        </HStack>
+                                                                                        <Text fontWeight="bold" fontSize="sm" color="gray.800">
+                                                                                            {event.title}
+                                                                                        </Text>
+                                                                                        <Text fontSize="xs" color="gray.600" noOfLines={3}>
+                                                                                            {event.content || '暂无内容'}
+                                                                                        </Text>
+                                                                                        <Button
+                                                                                            size="xs"
+                                                                                            variant="link"
+                                                                                            colorScheme="blue"
+                                                                                            leftIcon={<ViewIcon />}
+                                                                                            onClick={() => {
+                                                                                                if (event.type === 'news') {
+                                                                                                    trackNewsClicked(event, item.date);
+                                                                                                    trackNewsDetailOpened(event);
+                                                                                                    setSelectedNews({
+                                                                                                        title: event.title,
+                                                                                                        content: event.content,
+                                                                                                        source: event.source,
+                                                                                                        time: event.time,
+                                                                                                        url: event.url
+                                                                                                    });
+                                                                                                    setIsNewsModalOpen(true);
+                                                                                                } else if (event.type === 'report') {
+                                                                                                    trackReportClicked(event, item.date);
+                                                                                                    trackReportDetailOpened(event);
+                                                                                                    setSelectedReport({
+                                                                                                        title: event.title,
+                                                                                                        content: event.content,
+                                                                                                        publisher: event.publisher,
+                                                                                                        author: event.author,
+                                                                                                        time: event.time,
+                                                                                                        rating: event.rating,
+                                                                                                        security_name: event.security_name,
+                                                                                                        content_url: event.content_url
+                                                                                                    });
+                                                                                                    setIsReportModalOpen(true);
+                                                                                                }
+                                                                                            }}
+                                                                                        >
+                                                                                            查看详情
+                                                                                        </Button>
+                                                                                    </VStack>
+                                                                                </Box>
+                                                                            ))}
+                                                                        </VStack>
+                                                                    </Collapse>
+                                                                </Box>
+                                                            ) : (
+                                                                <Text fontSize="sm" color="gray.400" fontStyle="italic" textAlign="center" py={2}>
+                                                                    📭 当日无相关资讯
                                                                 </Text>
                                                             )}
                                                         </VStack>
                                                     </Box>
 
-                                                    {/* 中间 - 时间轴节点 */}
+                                                    {/* 时间轴节点 */}
                                                     <Box
                                                         position="relative"
                                                         zIndex={2}
+                                                        flexShrink={0}
                                                     >
                                                         <Box
-                                                            w={hasEvents ? 14 : (item.price ? 10 : 6)}
-                                                            h={hasEvents ? 14 : (item.price ? 10 : 6)}
+                                                            w={hasEvents ? 16 : 12}
+                                                            h={hasEvents ? 16 : 12}
                                                             borderRadius="full"
-                                                            bg={
-                                                                hasEvents ? 'purple.500' :
-                                                                    item.price ? (
-                                                                        priceInfo.color === 'red' ? 'red.400' :
-                                                                            priceInfo.color === 'green' ? 'green.400' :
-                                                                                'gray.400'
-                                                                    ) : 'gray.300'
+                                                            bgGradient={
+                                                                hasEvents
+                                                                    ? 'linear(135deg, purple.400, pink.400)'
+                                                                    : item.price
+                                                                        ? (priceInfo.color === 'red'
+                                                                            ? 'linear(135deg, red.400, red.500)'
+                                                                            : priceInfo.color === 'green'
+                                                                                ? 'linear(135deg, green.400, green.500)'
+                                                                                : 'linear(135deg, gray.300, gray.400)')
+                                                                        : 'linear(135deg, gray.200, gray.300)'
                                                             }
-                                                            border="4px solid"
-                                                            borderColor="white"
-                                                            boxShadow="lg"
+                                                            border="4px solid white"
+                                                            boxShadow="0 4px 12px rgba(0,0,0,0.15)"
                                                             position="relative"
                                                             cursor={hasEvents ? 'pointer' : 'default'}
                                                             onClick={() => hasEvents && toggleDateExpand(item.date)}
                                                             _hover={hasEvents ? {
-                                                                transform: 'scale(1.2)',
-                                                                bg: 'pink.500'
+                                                                transform: 'scale(1.15)',
+                                                                boxShadow: '0 6px 20px rgba(139, 92, 246, 0.4)'
                                                             } : {}}
-                                                            transition="all 0.2s"
+                                                            transition="all 0.3s"
+                                                            display="flex"
+                                                            alignItems="center"
+                                                            justifyContent="center"
                                                         >
                                                             {hasEvents && (
                                                                 <>
                                                                     <Badge
                                                                         position="absolute"
-                                                                        top="-2"
-                                                                        right="-2"
+                                                                        top="-1"
+                                                                        right="-1"
                                                                         colorScheme="red"
                                                                         borderRadius="full"
-                                                                        minW="24px"
-                                                                        h="24px"
+                                                                        minW="22px"
+                                                                        h="22px"
                                                                         display="flex"
                                                                         alignItems="center"
                                                                         justifyContent="center"
-                                                                        fontSize="sm"
+                                                                        fontSize="xs"
                                                                         fontWeight="bold"
                                                                         boxShadow="md"
                                                                         border="2px solid white"
                                                                     >
                                                                         {item.events.length}
                                                                     </Badge>
-                                                                    {/* 动画点击提示 */}
                                                                     <Box
                                                                         position="absolute"
                                                                         top="50%"
@@ -693,183 +828,21 @@ const ConceptTimelineModal = ({
                                                                 </>
                                                             )}
                                                         </Box>
-                                                    </Box>
 
-                                                    {/* 右侧 - 事件信息 */}
-                                                    <Box
-                                                        flex={1}
-                                                        pl={8}
-                                                    >
-                                                        {hasEvents ? (
-                                                            <Box>
-                                                                <Button
-                                                                    size="sm"
-                                                                    variant="ghost"
-                                                                    colorScheme="purple"
-                                                                    rightIcon={
-                                                                        <Icon
-                                                                            as={isExpanded ? ChevronDownIcon : ChevronRightIcon}
-                                                                            transition="transform 0.2s"
-                                                                        />
-                                                                    }
-                                                                    onClick={() => toggleDateExpand(item.date)}
-                                                                    mb={2}
-                                                                >
-                                                                    <HStack spacing={2}>
-                                                                        <Text>
-                                                                            {item.events.filter(e => e.type === 'news').length > 0 &&
-                                                                                `${item.events.filter(e => e.type === 'news').length} 条新闻`}
-                                                                        </Text>
-                                                                        {item.events.filter(e => e.type === 'news').length > 0 &&
-                                                                            item.events.filter(e => e.type === 'report').length > 0 &&
-                                                                            <Text>·</Text>
-                                                                        }
-                                                                        <Text>
-                                                                            {item.events.filter(e => e.type === 'report').length > 0 &&
-                                                                                `${item.events.filter(e => e.type === 'report').length} 份研报`}
-                                                                        </Text>
-                                                                    </HStack>
-                                                                </Button>
-
-                                                                <Collapse in={isExpanded} animateOpacity>
-                                                                    <VStack
-                                                                        align="stretch"
-                                                                        spacing={3}
-                                                                        maxH="400px"
-                                                                        overflowY="auto"
-                                                                        bg="white"
-                                                                        p={4}
-                                                                        borderRadius="lg"
-                                                                        boxShadow="sm"
-                                                                        border="1px solid"
-                                                                        borderColor="gray.200"
-                                                                        css={{
-                                                                            '&::-webkit-scrollbar': {
-                                                                                width: '6px',
-                                                                            },
-                                                                            '&::-webkit-scrollbar-track': {
-                                                                                background: '#f1f1f1',
-                                                                                borderRadius: '10px',
-                                                                            },
-                                                                            '&::-webkit-scrollbar-thumb': {
-                                                                                background: '#c1c1c1',
-                                                                                borderRadius: '10px',
-                                                                            },
-                                                                            '&::-webkit-scrollbar-thumb:hover': {
-                                                                                background: '#a8a8a8',
-                                                                            },
-                                                                        }}
-                                                                    >
-                                                                        {item.events.map((event, eventIdx) => (
-                                                                            <Box
-                                                                                key={eventIdx}
-                                                                                p={3}
-                                                                                bg={event.type === 'news' ? 'blue.50' : 'green.50'}
-                                                                                borderRadius="md"
-                                                                                borderLeft="3px solid"
-                                                                                borderLeftColor={event.type === 'news' ? 'blue.400' : 'green.400'}
-                                                                                _hover={{ transform: 'translateX(4px)' }}
-                                                                                transition="all 0.2s"
-                                                                            >
-                                                                                <VStack align="start" spacing={2}>
-                                                                                    <HStack spacing={2} flexWrap="wrap">
-                                                                                        <Badge
-                                                                                            colorScheme={event.type === 'news' ? 'blue' : 'green'}
-                                                                                            variant="solid"
-                                                                                        >
-                                                                                            {event.type === 'news' ? '新闻' : '研报'}
-                                                                                        </Badge>
-                                                                                        {event.source && (
-                                                                                            <Badge variant="subtle">
-                                                                                                {event.source}
-                                                                                            </Badge>
-                                                                                        )}
-                                                                                        {event.publisher && (
-                                                                                            <Badge colorScheme="purple" variant="subtle">
-                                                                                                {event.publisher}
-                                                                                            </Badge>
-                                                                                        )}
-                                                                                        {event.rating && (
-                                                                                            <Badge colorScheme="orange" variant="solid">
-                                                                                                {event.rating}
-                                                                                            </Badge>
-                                                                                        )}
-                                                                                    </HStack>
-
-                                                                                    <Text
-                                                                                        fontWeight="bold"
-                                                                                        fontSize="sm"
-                                                                                        color="gray.800"
-                                                                                    >
-                                                                                        {event.title}
-                                                                                    </Text>
-
-                                                                                    <Text
-                                                                                        fontSize="xs"
-                                                                                        color="gray.600"
-                                                                                        noOfLines={3}
-                                                                                    >
-                                                                                        {event.content || '暂无内容'}
-                                                                                    </Text>
-
-                                                                                    <Button
-                                                                                        size="xs"
-                                                                                        variant="link"
-                                                                                        colorScheme="blue"
-                                                                                        leftIcon={<ViewIcon />}
-                                                                                        onClick={() => {
-                                                                                            if (event.type === 'news') {
-                                                                                                // 🎯 追踪新闻点击和详情打开
-                                                                                                trackNewsClicked(event, item.date);
-                                                                                                trackNewsDetailOpened(event);
-
-                                                                                                setSelectedNews({
-                                                                                                    title: event.title,
-                                                                                                    content: event.content,
-                                                                                                    source: event.source,
-                                                                                                    time: event.time,
-                                                                                                    url: event.url
-                                                                                                });
-                                                                                                setIsNewsModalOpen(true);
-                                                                                            } else if (event.type === 'report') {
-                                                                                                // 🎯 追踪研报点击和详情打开
-                                                                                                trackReportClicked(event, item.date);
-                                                                                                trackReportDetailOpened(event);
-
-                                                                                                setSelectedReport({
-                                                                                                    title: event.title,
-                                                                                                    content: event.content,
-                                                                                                    publisher: event.publisher,
-                                                                                                    author: event.author,
-                                                                                                    time: event.time,
-                                                                                                    rating: event.rating,
-                                                                                                    security_name: event.security_name,
-                                                                                                    content_url: event.content_url
-                                                                                                });
-                                                                                                setIsReportModalOpen(true);
-                                                                                            }
-                                                                                        }}
-                                                                                    >
-                                                                                        查看详情
-                                                                                    </Button>
-                                                                                </VStack>
-                                                                            </Box>
-                                                                        ))}
-                                                                    </VStack>
-                                                                </Collapse>
-                                                            </Box>
-                                                        ) : (
-                                                            <Text fontSize="sm" color="gray.400" fontStyle="italic">
-                                                                当日无相关资讯
-                                                            </Text>
+                                                        {/* 连接线到下一个节点 */}
+                                                        {index < timelineData.length - 1 && (
+                                                            <Box
+                                                                position="absolute"
+                                                                top="100%"
+                                                                left="50%"
+                                                                transform="translateX(-50%)"
+                                                                width="2px"
+                                                                height="40px"
+                                                                bgGradient="linear(to-b, purple.300, pink.300)"
+                                                            />
                                                         )}
                                                     </Box>
                                                 </Flex>
-
-                                                {/* 分隔线 */}
-                                                {index < timelineData.length - 1 && (
-                                                    <Divider opacity={0.3} />
-                                                )}
                                             </Box>
                                         );
                                     })}