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