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

update ui

Browse Source
This commit is contained in:
zzlgreat
2025-11-13 22:21:59 +08:00
parent 7e0358ede4
commit c6062efb00
3 changed files with 207 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files

295
src/views/Community/components/DynamicNewsDetail/StockListItem.js
View File

@@ -125,157 +125,156 @@ const StockListItem = ({
transition="all 0.2s"
>
{/* 单行紧凑布局：名称+涨跌幅 | 分时图 | K线图 | 关联描述 */}
<HStack spacing={3} align="center" flexWrap="wrap">
{/* 左侧：股票代码 + 名称 + 涨跌幅（垂直排列） */}
<VStack
align="stretch"
spacing={1}
minW="110px"
maxW="130px"
justify="center"
flexShrink={0}
>
<Tooltip
label="点击查看股票详情"
placement="top"
hasArrow
bg="blue.600"
color="white"
fontSize="xs"
<HStack spacing={2} align="center" flexWrap="wrap">
{/* 左侧：股票信息区 */}
<HStack spacing={2} minW="360px" maxW="380px" flexShrink={0}>
{/* 股票代码 + 名称 + 涨跌幅 */}
<VStack
align="stretch"
spacing={1}
minW="95px"
maxW="110px"
justify="center"
flexShrink={0}
>
<VStack spacing={0} align="stretch">
<Text
fontSize="xs"
color={codeColor}
noOfLines={1}
cursor="pointer"
onClick={handleViewDetail}
_hover={{ textDecoration: 'underline' }}
>
{stock.stock_code}
</Text>
<Text
fontSize="sm"
fontWeight="bold"
color={nameColor}
noOfLines={1}
cursor="pointer"
onClick={handleViewDetail}
_hover={{ textDecoration: 'underline' }}
>
{stock.stock_name}
</Text>
</VStack>
</Tooltip>
<HStack spacing={1} align="center">
<Text
fontSize="lg"
fontWeight="bold"
color={getChangeColor(change)}
<Tooltip
label="点击查看股票详情"
placement="top"
hasArrow
bg="blue.600"
color="white"
fontSize="xs"
>
{formatChange(change)}
<VStack spacing={0} align="stretch">
<Text
fontSize="xs"
color={codeColor}
noOfLines={1}
cursor="pointer"
onClick={handleViewDetail}
_hover={{ textDecoration: 'underline' }}
>
{stock.stock_code}
</Text>
<Text
fontSize="xs"
fontWeight="bold"
color={nameColor}
noOfLines={1}
cursor="pointer"
onClick={handleViewDetail}
_hover={{ textDecoration: 'underline' }}
>
{stock.stock_name}
</Text>
</VStack>
</Tooltip>
<HStack spacing={1} align="center">
<Text
fontSize="md"
fontWeight="bold"
color={getChangeColor(change)}
>
{formatChange(change)}
</Text>
{onWatchlistToggle && (
<IconButton
size="xs"
variant={isInWatchlist ? 'solid' : 'ghost'}
colorScheme={isInWatchlist ? 'yellow' : 'gray'}
icon={<StarIcon />}
onClick={handleWatchlistClick}
aria-label={isInWatchlist ? '已关注' : '加自选'}
borderRadius="full"
/>
)}
</HStack>
</VStack>
{/* 分时图 - 更紧凑 */}
<VStack
w="115px"
borderWidth="1px"
borderColor={useColorModeValue('blue.100', 'blue.700')}
borderRadius="md"
px={1.5}
py={1}
bg={useColorModeValue('blue.50', 'blue.900')}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={0}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: useColorModeValue('blue.300', 'blue.500'),
boxShadow: 'md',
transform: 'translateY(-1px)'
}}
transition="all 0.2s"
>
<Text
fontSize="10px"
color={useColorModeValue('blue.700', 'blue.200')}
fontWeight="semibold"
whiteSpace="nowrap"
mb={0.5}
>
📈 分时
</Text>
{onWatchlistToggle && (
<IconButton
size="xs"
variant={isInWatchlist ? 'solid' : 'ghost'}
colorScheme={isInWatchlist ? 'yellow' : 'gray'}
icon={<StarIcon />}
onClick={handleWatchlistClick}
aria-label={isInWatchlist ? '已关注' : '加自选'}
borderRadius="full"
<Box h="32px">
<MiniTimelineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
)}
</HStack>
</VStack>
</Box>
</VStack>
{/* 分时图 - 紧凑高度 */}
<VStack
minW="150px"
maxW="180px"
flex="1"
borderWidth="1px"
borderColor={useColorModeValue('blue.100', 'blue.700')}
borderRadius="md"
px={2}
py={1}
bg={useColorModeValue('blue.50', 'blue.900')}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={1}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: useColorModeValue('blue.300', 'blue.500'),
boxShadow: 'md',
transform: 'translateY(-1px)'
}}
transition="all 0.2s"
>
<Text
fontSize="xs"
color={useColorModeValue('blue.700', 'blue.200')}
fontWeight="semibold"
whiteSpace="nowrap"
mb={0.5}
{/* K线图 - 更紧凑 */}
<VStack
w="115px"
borderWidth="1px"
borderColor={useColorModeValue('purple.100', 'purple.700')}
borderRadius="md"
px={1.5}
py={1}
bg={useColorModeValue('purple.50', 'purple.900')}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={0}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: useColorModeValue('purple.300', 'purple.500'),
boxShadow: 'md',
transform: 'translateY(-1px)'
}}
transition="all 0.2s"
>
📈 分时
</Text>
<Box h="35px">
<MiniTimelineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
</Box>
</VStack>
{/* K线图 - 紧凑高度 */}
<VStack
minW="150px"
maxW="180px"
flex="1"
borderWidth="1px"
borderColor={useColorModeValue('purple.100', 'purple.700')}
borderRadius="md"
px={2}
py={1}
bg={useColorModeValue('purple.50', 'purple.900')}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
flexShrink={1}
align="stretch"
spacing={0}
h="fit-content"
_hover={{
borderColor: useColorModeValue('purple.300', 'purple.500'),
boxShadow: 'md',
transform: 'translateY(-1px)'
}}
transition="all 0.2s"
>
<Text
fontSize="xs"
color={useColorModeValue('purple.700', 'purple.200')}
fontWeight="semibold"
whiteSpace="nowrap"
mb={0.5}
>
📊 日线
</Text>
<Box h="35px">
<MiniKLineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
</Box>
</VStack>
<Text
fontSize="10px"
color={useColorModeValue('purple.700', 'purple.200')}
fontWeight="semibold"
whiteSpace="nowrap"
mb={0.5}
>
📊 日线
</Text>
<Box h="32px">
<MiniKLineChart
stockCode={stock.stock_code}
eventTime={eventTime}
/>
</Box>
</VStack>
</HStack>
{/* 关联描述 - 升级和降级处理 */}
{stock.relation_desc && (
@@ -347,11 +346,11 @@ const StockListItem = ({
position="relative"
>
{/* 去掉"关联描述"标题 */}
<Collapse in={isDescExpanded} startingHeight={40}>
<Collapse in={isDescExpanded} startingHeight={36}>
<Text
fontSize="sm"
fontSize="xs"
color={nameColor}
lineHeight="1.6"
lineHeight="1.5"
>
{relationText}
</Text>