feat: k线图自适应

This commit is contained in:
zdl
2025-11-05 10:10:22 +08:00
parent bf89c0e13e
commit 69d4b8bae0
3 changed files with 81 additions and 54 deletions

View File

@@ -161,8 +161,8 @@ const MiniKLineChart = React.memo(function MiniKLineChart({ stockCode, eventTime
return ( return (
<div <div
style={{ style={{
width: 140, width: '100%',
height: 40, height: 30,
cursor: onClick ? 'pointer' : 'default' cursor: onClick ? 'pointer' : 'default'
}} }}
onClick={onClick} onClick={onClick}

View File

@@ -115,9 +115,11 @@ const StockListItem = ({
transition="all 0.2s" transition="all 0.2s"
> >
<VStack align="stretch" spacing={3}> <VStack align="stretch" spacing={3}>
{/* 顶部:股票代码 + 名称 + 操作按钮 */} {/* 顶部:股票代码 + 名称 + 操作按钮(上下两行布局) */}
<VStack align="stretch" spacing={2}>
{/* 第一行:股票代码 + 涨跌幅 + 操作按钮 */}
<Flex justify="space-between" align="center"> <Flex justify="space-between" align="center">
{/* 左侧:代码 + 名称 */} {/* 左侧:代码 + 涨跌幅 */}
<Flex align="baseline" gap={2}> <Flex align="baseline" gap={2}>
<Text <Text
fontSize="md" fontSize="md"
@@ -129,9 +131,6 @@ const StockListItem = ({
> >
{stock.stock_code} {stock.stock_code}
</Text> </Text>
<Text fontSize="sm" color={nameColor}>
{stock.stock_name}
</Text>
<Text <Text
fontSize="sm" fontSize="sm"
fontWeight="semibold" fontWeight="semibold"
@@ -161,12 +160,28 @@ const StockListItem = ({
e.stopPropagation(); e.stopPropagation();
handleViewDetail(); handleViewDetail();
}} }}
display={{ base: 'inline-flex', lg: 'none' }}
> >
查看 查看
</Button> </Button>
</Flex> </Flex>
</Flex> </Flex>
{/* 第二行:公司名称(彩色高亮) */}
<Text
fontSize="sm"
fontWeight="medium"
color={codeColor}
bg={useColorModeValue('blue.50', 'blue.900')}
px={2}
py={0.5}
borderRadius="sm"
width="fit-content"
>
{stock.stock_name}
</Text>
</VStack>
{/* 分隔线 */} {/* 分隔线 */}
<Box borderTop="1px solid" borderColor={dividerColor} /> <Box borderTop="1px solid" borderColor={dividerColor} />
@@ -209,7 +224,19 @@ const StockListItem = ({
关联描述 关联描述
</Text> </Text>
<Collapse in={isDescExpanded} startingHeight={40}> <Collapse in={isDescExpanded} startingHeight={40}>
<Text fontSize="sm" color={nameColor} lineHeight="1.6"> <Text
fontSize="sm"
color={nameColor}
lineHeight="1.6"
cursor={needTruncate ? "pointer" : "default"}
onClick={(e) => {
if (needTruncate) {
e.stopPropagation();
setIsDescExpanded(!isDescExpanded);
}
}}
_hover={needTruncate ? { opacity: 0.8 } : {}}
>
{relationText} {relationText}
</Text> </Text>
</Collapse> </Collapse>

View File

@@ -165,8 +165,8 @@ const MiniTimelineChart = React.memo(function MiniTimelineChart({ stockCode, eve
return ( return (
<div <div
style={{ style={{
width: 140, width: '100%',
height: 40, height: 30,
cursor: onClick ? 'pointer' : 'default' cursor: onClick ? 'pointer' : 'default'
}} }}
onClick={onClick} onClick={onClick}