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

事件中心UI优化

Browse Source
This commit is contained in:
zzlgreat
2025-11-07 10:16:21 +08:00
parent 389a45fc0a
commit 663d73609a
1 changed files with 171 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -101,25 +101,12 @@ 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="2px"
borderWidth="1px"
borderColor={borderColor}
borderRadius="xl"
p={4}
onClick={handleViewDetail}
cursor="pointer"
borderRadius="lg"
p={3}
position="relative"
overflow="hidden"
_before={{
@@ -128,192 +115,187 @@ const StockListItem = ({
top: 0,
left: 0,
right: 0,
height: '4px',
height: '3px',
bgGradient: 'linear(to-r, blue.400, purple.500, pink.500)',
}}
_hover={{
boxShadow: '2xl',
borderColor: 'blue.400',
transform: 'translateY(-4px)',
boxShadow: 'lg',
borderColor: 'blue.300',
}}
transition="all 0.3s ease-in-out"
transition="all 0.2s"
>
{/* 单行布局：股票代码 + 名称 + 涨跌幅 + 分时图 + 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"
{/* 单行紧凑布局：名称+涨跌幅 | 分时图 | 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="bold"
color="white"
>
{stock.stock_code}
</Text>
</Box>
<Text
fontSize="md"
fontWeight="semibold"
color={nameColor}
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}
w="180px"
borderWidth="1px"
borderColor={useColorModeValue('blue.100', 'blue.700')}
borderRadius="lg"
borderRadius="md"
p={2}
bg={useColorModeValue('blue.50', 'blue.900')}
transition="all 0.2s"
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
_hover={{
borderColor: useColorModeValue('blue.300', 'blue.500'),
boxShadow: 'md'
boxShadow: 'sm'
}}
transition="all 0.2s"
>
<Text
fontSize="xs"
color={useColorModeValue('blue.700', 'blue.200')}
mb={1}
fontWeight="bold"
textTransform="uppercase"
letterSpacing="wide"
fontWeight="semibold"
>
📈 分时走势
📈 分时
</Text>
<MiniTimelineChart
stockCode={stock.stock_code}
eventTime={eventTime}
onClick={() => setIsModalOpen(true)}
/>
</Box>
{/* K线图 */}
<Box
flex={1}
minW={0}
w="180px"
borderWidth="1px"
borderColor={useColorModeValue('purple.100', 'purple.700')}
borderRadius="lg"
borderRadius="md"
p={2}
bg={useColorModeValue('purple.50', 'purple.900')}
transition="all 0.2s"
onClick={(e) => e.stopPropagation()}
onClick={(e) => {
e.stopPropagation();
setIsModalOpen(true);
}}
cursor="pointer"
_hover={{
borderColor: useColorModeValue('purple.300', 'purple.500'),
boxShadow: 'md'
boxShadow: 'sm'
}}
transition="all 0.2s"
>
<Text
fontSize="xs"
color={useColorModeValue('purple.700', 'purple.200')}
mb={1}
fontWeight="bold"
textTransform="uppercase"
letterSpacing="wide"
fontWeight="semibold"
>
📊 K线走势
📊 日线
</Text>
<MiniKLineChart
stockCode={stock.stock_code}
eventTime={eventTime}
onClick={() => setIsModalOpen(true)}
/>
</Box>
</HStack>
{/* 关联描述（折叠区域） */}
{/* 关联描述（单行显示，点击展开） */}
{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}>
关联描述
</Text>
{needTruncate && (
<Button
size="xs"
variant="ghost"
colorScheme="blue"
<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"
>
{isDescExpanded ? '收起 ▲' : '展开 ▼'}
</Button>
)}
</Flex>
<Collapse in={isDescExpanded} startingHeight={needTruncate ? 40 : undefined}>
<Text fontSize="xs" color={descColor} fontWeight="semibold" mb={1}>
关联描述
</Text>
<Collapse in={isDescExpanded} startingHeight={20}>
<Text
fontSize="sm"
color={nameColor}
lineHeight="1.8"
lineHeight="1.6"
>
{relationText}
</Text>
</Collapse>
{/* 合规提示 */}
{isDescExpanded && (
<Text
fontSize="xs"
color="gray.500"
mt={3}
mt={2}
fontStyle="italic"
>
⚠️ 以上关联描述由AI生成，仅供参考，不构成投资建议
⚠️ AI生成，仅供参考
</Text>
</Box>
)}
</Box>
</Tooltip>
)}
</HStack>
</Box>
{/* 股票详情弹窗 - 未打开时不渲染 */}
{isModalOpen && (