事件中心UI优化
This commit is contained in:
@@ -101,219 +101,201 @@ const StockListItem = ({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Tooltip
|
||||
label="点击查看股票详情"
|
||||
placement="top"
|
||||
hasArrow
|
||||
bg="blue.600"
|
||||
color="white"
|
||||
fontSize="sm"
|
||||
px={3}
|
||||
py={2}
|
||||
borderRadius="md"
|
||||
<Box
|
||||
bg={cardBg}
|
||||
borderWidth="1px"
|
||||
borderColor={borderColor}
|
||||
borderRadius="lg"
|
||||
p={3}
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '3px',
|
||||
bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
|
||||
}}
|
||||
_hover={{
|
||||
boxShadow: 'lg',
|
||||
borderColor: 'blue.300',
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<Box
|
||||
bg={cardBg}
|
||||
borderWidth="2px"
|
||||
borderColor={borderColor}
|
||||
borderRadius="xl"
|
||||
p={4}
|
||||
onClick={handleViewDetail}
|
||||
cursor="pointer"
|
||||
position="relative"
|
||||
overflow="hidden"
|
||||
_before={{
|
||||
content: '""',
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: '4px',
|
||||
bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
|
||||
}}
|
||||
_hover={{
|
||||
boxShadow: '2xl',
|
||||
borderColor: 'blue.400',
|
||||
transform: 'translateY(-4px)',
|
||||
}}
|
||||
transition="all 0.3s ease-in-out"
|
||||
>
|
||||
{/* 单行布局：股票代码 + 名称 + 涨跌幅 + 分时图 + K线图 */}
|
||||
<HStack spacing={4} align="center">
|
||||
{/* 左侧：股票代码 + 名称 + 自选按钮 */}
|
||||
<HStack spacing={3} minW="200px" maxW="240px">
|
||||
<Box
|
||||
bgGradient="linear(to-r, blue.400, blue.600)"
|
||||
px={3}
|
||||
py={1.5}
|
||||
borderRadius="md"
|
||||
boxShadow="sm"
|
||||
>
|
||||
<Text
|
||||
fontSize="md"
|
||||
fontWeight="bold"
|
||||
color="white"
|
||||
>
|
||||
{stock.stock_code}
|
||||
</Text>
|
||||
</Box>
|
||||
{/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
|
||||
<HStack spacing={3} align="stretch">
|
||||
{/* 左侧：股票名称 + 涨跌幅（垂直排列） */}
|
||||
<VStack
|
||||
align="stretch"
|
||||
spacing={1}
|
||||
minW="140px"
|
||||
maxW="160px"
|
||||
justify="center"
|
||||
>
|
||||
<Tooltip
|
||||
label="点击查看股票详情"
|
||||
placement="top"
|
||||
hasArrow
|
||||
bg="blue.600"
|
||||
color="white"
|
||||
fontSize="xs"
|
||||
>
|
||||
<Text
|
||||
fontSize="md"
|
||||
fontWeight="semibold"
|
||||
color={nameColor}
|
||||
fontWeight="bold"
|
||||
color={codeColor}
|
||||
noOfLines={1}
|
||||
flex={1}
|
||||
cursor="pointer"
|
||||
onClick={handleViewDetail}
|
||||
_hover={{ textDecoration: 'underline' }}
|
||||
>
|
||||
{stock.stock_name}
|
||||
</Text>
|
||||
{onWatchlistToggle && (
|
||||
<IconButton
|
||||
size="sm"
|
||||
variant={isInWatchlist ? 'solid' : 'outline'}
|
||||
colorScheme={isInWatchlist ? 'yellow' : 'gray'}
|
||||
icon={<StarIcon />}
|
||||
onClick={handleWatchlistClick}
|
||||
aria-label={isInWatchlist ? '已关注' : '加自选'}
|
||||
title={isInWatchlist ? '已关注' : '加自选'}
|
||||
borderRadius="full"
|
||||
flexShrink={0}
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
{/* 涨跌幅 */}
|
||||
<Box
|
||||
bg={useColorModeValue('gray.50', 'gray.700')}
|
||||
px={4}
|
||||
py={2}
|
||||
borderRadius="lg"
|
||||
boxShadow="sm"
|
||||
minW="120px"
|
||||
textAlign="center"
|
||||
>
|
||||
<Text fontSize="xs" color={descColor} mb={1}>
|
||||
涨跌幅
|
||||
</Text>
|
||||
</Tooltip>
|
||||
<HStack spacing={2} align="center">
|
||||
<Text
|
||||
fontSize="2xl"
|
||||
fontSize="xl"
|
||||
fontWeight="bold"
|
||||
color={getChangeColor(change)}
|
||||
>
|
||||
{formatChange(change)}
|
||||
</Text>
|
||||
</Box>
|
||||
{onWatchlistToggle && (
|
||||
<IconButton
|
||||
size="xs"
|
||||
variant={isInWatchlist ? 'solid' : 'ghost'}
|
||||
colorScheme={isInWatchlist ? 'yellow' : 'gray'}
|
||||
icon={<StarIcon />}
|
||||
onClick={handleWatchlistClick}
|
||||
aria-label={isInWatchlist ? '已关注' : '加自选'}
|
||||
borderRadius="full"
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
|
||||
{/* 分时图 */}
|
||||
<Box
|
||||
flex={1}
|
||||
minW={0}
|
||||
borderWidth="1px"
|
||||
borderColor={useColorModeValue('blue.100', 'blue.700')}
|
||||
borderRadius="lg"
|
||||
p={2}
|
||||
bg={useColorModeValue('blue.50', 'blue.900')}
|
||||
transition="all 0.2s"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
_hover={{
|
||||
borderColor: useColorModeValue('blue.300', 'blue.500'),
|
||||
boxShadow: 'md'
|
||||
}}
|
||||
{/* 分时图 */}
|
||||
<Box
|
||||
w="180px"
|
||||
borderWidth="1px"
|
||||
borderColor={useColorModeValue('blue.100', 'blue.700')}
|
||||
borderRadius="md"
|
||||
p={2}
|
||||
bg={useColorModeValue('blue.50', 'blue.900')}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
cursor="pointer"
|
||||
_hover={{
|
||||
borderColor: useColorModeValue('blue.300', 'blue.500'),
|
||||
boxShadow: 'sm'
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={useColorModeValue('blue.700', 'blue.200')}
|
||||
mb={1}
|
||||
fontWeight="semibold"
|
||||
>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={useColorModeValue('blue.700', 'blue.200')}
|
||||
mb={1}
|
||||
fontWeight="bold"
|
||||
textTransform="uppercase"
|
||||
letterSpacing="wide"
|
||||
>
|
||||
📈 分时走势
|
||||
</Text>
|
||||
<MiniTimelineChart
|
||||
stockCode={stock.stock_code}
|
||||
eventTime={eventTime}
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
/>
|
||||
</Box>
|
||||
📈 分时
|
||||
</Text>
|
||||
<MiniTimelineChart
|
||||
stockCode={stock.stock_code}
|
||||
eventTime={eventTime}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* K线图 */}
|
||||
<Box
|
||||
flex={1}
|
||||
minW={0}
|
||||
borderWidth="1px"
|
||||
borderColor={useColorModeValue('purple.100', 'purple.700')}
|
||||
borderRadius="lg"
|
||||
p={2}
|
||||
bg={useColorModeValue('purple.50', 'purple.900')}
|
||||
transition="all 0.2s"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
_hover={{
|
||||
borderColor: useColorModeValue('purple.300', 'purple.500'),
|
||||
boxShadow: 'md'
|
||||
}}
|
||||
{/* K线图 */}
|
||||
<Box
|
||||
w="180px"
|
||||
borderWidth="1px"
|
||||
borderColor={useColorModeValue('purple.100', 'purple.700')}
|
||||
borderRadius="md"
|
||||
p={2}
|
||||
bg={useColorModeValue('purple.50', 'purple.900')}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsModalOpen(true);
|
||||
}}
|
||||
cursor="pointer"
|
||||
_hover={{
|
||||
borderColor: useColorModeValue('purple.300', 'purple.500'),
|
||||
boxShadow: 'sm'
|
||||
}}
|
||||
transition="all 0.2s"
|
||||
>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={useColorModeValue('purple.700', 'purple.200')}
|
||||
mb={1}
|
||||
fontWeight="semibold"
|
||||
>
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color={useColorModeValue('purple.700', 'purple.200')}
|
||||
mb={1}
|
||||
fontWeight="bold"
|
||||
textTransform="uppercase"
|
||||
letterSpacing="wide"
|
||||
>
|
||||
📊 K线走势
|
||||
</Text>
|
||||
<MiniKLineChart
|
||||
stockCode={stock.stock_code}
|
||||
eventTime={eventTime}
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
/>
|
||||
</Box>
|
||||
</HStack>
|
||||
📊 日线
|
||||
</Text>
|
||||
<MiniKLineChart
|
||||
stockCode={stock.stock_code}
|
||||
eventTime={eventTime}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{/* 关联描述（折叠区域） */}
|
||||
{/* 关联描述（单行显示，点击展开） */}
|
||||
{relationText && relationText !== '--' && (
|
||||
<Box mt={4} pt={4} borderTop="1px solid" borderColor={dividerColor}>
|
||||
<Flex justify="space-between" align="center" mb={2}>
|
||||
<Text fontSize="sm" fontWeight="semibold" color={descColor}>
|
||||
<Tooltip
|
||||
label={isDescExpanded ? "点击收起" : "点击展开完整描述"}
|
||||
placement="top"
|
||||
hasArrow
|
||||
bg="gray.600"
|
||||
color="white"
|
||||
fontSize="xs"
|
||||
>
|
||||
<Box
|
||||
flex={1}
|
||||
minW={0}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDescExpanded(!isDescExpanded);
|
||||
}}
|
||||
cursor="pointer"
|
||||
px={3}
|
||||
py={2}
|
||||
bg={useColorModeValue('gray.50', 'gray.700')}
|
||||
borderRadius="md"
|
||||
_hover={{
|
||||
bg: useColorModeValue('gray.100', 'gray.600'),
|
||||
}}
|
||||
transition="background 0.2s"
|
||||
>
|
||||
<Text fontSize="xs" color={descColor} fontWeight="semibold" mb={1}>
|
||||
关联描述
|
||||
</Text>
|
||||
{needTruncate && (
|
||||
<Button
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
colorScheme="blue"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsDescExpanded(!isDescExpanded);
|
||||
}}
|
||||
<Collapse in={isDescExpanded} startingHeight={20}>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={nameColor}
|
||||
lineHeight="1.6"
|
||||
>
|
||||
{isDescExpanded ? '收起 ▲' : '展开 ▼'}
|
||||
</Button>
|
||||
{relationText}
|
||||
</Text>
|
||||
</Collapse>
|
||||
{isDescExpanded && (
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color="gray.500"
|
||||
mt={2}
|
||||
fontStyle="italic"
|
||||
>
|
||||
⚠️ AI生成，仅供参考
|
||||
</Text>
|
||||
)}
|
||||
</Flex>
|
||||
<Collapse in={isDescExpanded} startingHeight={needTruncate ? 40 : undefined}>
|
||||
<Text
|
||||
fontSize="sm"
|
||||
color={nameColor}
|
||||
lineHeight="1.8"
|
||||
>
|
||||
{relationText}
|
||||
</Text>
|
||||
</Collapse>
|
||||
|
||||
{/* 合规提示 */}
|
||||
<Text
|
||||
fontSize="xs"
|
||||
color="gray.500"
|
||||
mt={3}
|
||||
fontStyle="italic"
|
||||
>
|
||||
⚠️ 以上关联描述由AI生成，仅供参考，不构成投资建议
|
||||
</Text>
|
||||
</Box>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</HStack>
|
||||
</Box>
|
||||
|
||||
{/* 股票详情弹窗 - 未打开时不渲染 */}
|
||||
{isModalOpen && (
|
||||
|
||||
Reference in New Issue
Block a user