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 09:57:49 +08:00
parent 67c7fa49e8
commit 389a45fc0a
1 changed files with 130 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,15 +6,12 @@ import {
Box, Box,
Flex, Flex,
VStack, VStack,
HStack,
Text, Text,
Button, Button,
IconButton, IconButton,
Collapse, Collapse,
Stat, Tooltip,
StatLabel,
StatNumber,
StatHelpText,
StatArrow,
useColorModeValue, useColorModeValue,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { StarIcon } from '@chakra-ui/icons'; import { StarIcon } from '@chakra-ui/icons';
@@ -104,110 +101,108 @@ const StockListItem = ({
return ( return (
<> <>
<Box <Tooltip
bg={cardBg} label="点击查看股票详情"
borderWidth="2px" placement="top"
borderColor={borderColor} hasArrow
borderRadius="xl" bg="blue.600"
p={5} color="white"
onClick={handleViewDetail} fontSize="sm"
cursor="pointer" px={3}
position="relative" py={2}
overflow="hidden" borderRadius="md"
_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"
> >
{/* 横向布局：左侧基础信息 + 中间图表 + 右侧操作按钮 */} <Box
<Flex direction={{ base: 'column', lg: 'row' }} gap={4} align="stretch"> bg={cardBg}
{/* 左侧：基础信息区（股票代码、名称、涨跌幅） */} borderWidth="2px"
<Flex direction="column" minW={{ base: 'auto', lg: '200px' }} maxW={{ base: 'auto', lg: '240px' }} gap={2}> borderColor={borderColor}
{/* 股票代码和名称 */} borderRadius="xl"
<VStack align="stretch" spacing={2}> p={4}
<Flex align="center" gap={2}> onClick={handleViewDetail}
<Box cursor="pointer"
bgGradient="linear(to-r, blue.400, blue.600)" position="relative"
px={3} overflow="hidden"
py={1} _before={{
borderRadius="md" content: '""',
boxShadow="sm" 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"
> >
<Text {stock.stock_code}
fontSize="md" </Text>
fontWeight="bold" </Box>
color="white"
cursor="pointer"
onClick={handleViewDetail}
_hover={{ opacity: 0.8 }}
transition="opacity 0.2s"
>
{stock.stock_code}
</Text>
</Box>
{onWatchlistToggle && (
<IconButton
size="sm"
variant={isInWatchlist ? 'solid' : 'outline'}
colorScheme={isInWatchlist ? 'yellow' : 'gray'}
icon={<StarIcon />}
onClick={handleWatchlistClick}
aria-label={isInWatchlist ? '已关注' : '加自选'}
title={isInWatchlist ? '已关注' : '加自选'}
borderRadius="full"
/>
)}
</Flex>
<Text <Text
fontSize="md" fontSize="md"
fontWeight="semibold" fontWeight="semibold"
color={nameColor} color={nameColor}
noOfLines={1} noOfLines={1}
flex={1}
> >
{stock.stock_name} {stock.stock_name}
</Text> </Text>
</VStack> {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>
{/* 涨跌幅 - 使用 Stat 组件 */} {/* 涨跌幅 */}
<Stat <Box
bg={useColorModeValue('gray.50', 'gray.700')} bg={useColorModeValue('gray.50', 'gray.700')}
px={3} px={4}
py={2} py={2}
borderRadius="lg" borderRadius="lg"
boxShadow="sm" boxShadow="sm"
minW="120px"
textAlign="center"
> >
<StatLabel fontSize="xs" color={descColor}> <Text fontSize="xs" color={descColor} mb={1}>
涨跌幅 涨跌幅
</StatLabel> </Text>
<StatNumber <Text
fontSize="2xl" fontSize="2xl"
fontWeight="bold" fontWeight="bold"
color={getChangeColor(change)} color={getChangeColor(change)}
> >
{formatChange(change)} {formatChange(change)}
</StatNumber> </Text>
{change !== null && change !== undefined && !isNaN(change) && ( </Box>
<StatHelpText mb={0}>
<StatArrow type={change >= 0 ? 'increase' : 'decrease'} />
{Math.abs(change).toFixed(2)}%
</StatHelpText>
)}
</Stat>
</Flex>
{/* 中间：图表区（分时图 + K线图） */}
<Flex flex={1} gap={3} onClick={(e) => e.stopPropagation()} minW={0}>
{/* 分时图 */} {/* 分时图 */}
<Box <Box
flex={1} flex={1}
@@ -215,9 +210,10 @@ const StockListItem = ({
borderWidth="1px" borderWidth="1px"
borderColor={useColorModeValue('blue.100', 'blue.700')} borderColor={useColorModeValue('blue.100', 'blue.700')}
borderRadius="lg" borderRadius="lg"
p={3} p={2}
bg={useColorModeValue('blue.50', 'blue.900')} bg={useColorModeValue('blue.50', 'blue.900')}
transition="all 0.2s" transition="all 0.2s"
onClick={(e) => e.stopPropagation()}
_hover={{ _hover={{
borderColor: useColorModeValue('blue.300', 'blue.500'), borderColor: useColorModeValue('blue.300', 'blue.500'),
boxShadow: 'md' boxShadow: 'md'
@@ -226,7 +222,7 @@ const StockListItem = ({
<Text <Text
fontSize="xs" fontSize="xs"
color={useColorModeValue('blue.700', 'blue.200')} color={useColorModeValue('blue.700', 'blue.200')}
mb={2} mb={1}
fontWeight="bold" fontWeight="bold"
textTransform="uppercase" textTransform="uppercase"
letterSpacing="wide" letterSpacing="wide"
@@ -247,9 +243,10 @@ const StockListItem = ({
borderWidth="1px" borderWidth="1px"
borderColor={useColorModeValue('purple.100', 'purple.700')} borderColor={useColorModeValue('purple.100', 'purple.700')}
borderRadius="lg" borderRadius="lg"
p={3} p={2}
bg={useColorModeValue('purple.50', 'purple.900')} bg={useColorModeValue('purple.50', 'purple.900')}
transition="all 0.2s" transition="all 0.2s"
onClick={(e) => e.stopPropagation()}
_hover={{ _hover={{
borderColor: useColorModeValue('purple.300', 'purple.500'), borderColor: useColorModeValue('purple.300', 'purple.500'),
boxShadow: 'md' boxShadow: 'md'
@@ -258,7 +255,7 @@ const StockListItem = ({
<Text <Text
fontSize="xs" fontSize="xs"
color={useColorModeValue('purple.700', 'purple.200')} color={useColorModeValue('purple.700', 'purple.200')}
mb={2} mb={1}
fontWeight="bold" fontWeight="bold"
textTransform="uppercase" textTransform="uppercase"
letterSpacing="wide" letterSpacing="wide"
@@ -271,78 +268,52 @@ const StockListItem = ({
onClick={() => setIsModalOpen(true)} onClick={() => setIsModalOpen(true)}
/> />
</Box> </Box>
</Flex> </HStack>
{/* 右侧：操作按钮 */} {/* 关联描述（折叠区域） */}
<Flex direction="column" gap={2} minW={{ base: 'auto', lg: '120px' }} justify="center"> {relationText && relationText !== '--' && (
<Button <Box mt={4} pt={4} borderTop="1px solid" borderColor={dividerColor}>
size="md" <Flex justify="space-between" align="center" mb={2}>
bgGradient="linear(to-r, blue.400, blue.600)" <Text fontSize="sm" fontWeight="semibold" color={descColor}>
color="white" 关联描述
_hover={{ </Text>
bgGradient: "linear(to-r, blue.500, blue.700)", {needTruncate && (
transform: "scale(1.05)", <Button
}} size="xs"
_active={{ variant="ghost"
bgGradient: "linear(to-r, blue.600, blue.800)", colorScheme="blue"
}} onClick={(e) => {
boxShadow="md" e.stopPropagation();
borderRadius="lg" setIsDescExpanded(!isDescExpanded);
fontWeight="bold" }}
onClick={(e) => { >
e.stopPropagation(); {isDescExpanded ? '收起 ▲' : '展开 ▼'}
handleViewDetail(); </Button>
}} )}
transition="all 0.2s" </Flex>
> <Collapse in={isDescExpanded} startingHeight={needTruncate ? 40 : undefined}>
查看详情 → <Text
</Button> fontSize="sm"
</Flex> color={nameColor}
</Flex> lineHeight="1.8"
{/* 关联描述（折叠区域） */}
{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"
onClick={(e) => {
e.stopPropagation();
setIsDescExpanded(!isDescExpanded);
}}
> >
{isDescExpanded ? '收起 ▲' : '展开 ▼'} {relationText}
</Button> </Text>
)} </Collapse>
</Flex>
<Collapse in={isDescExpanded} startingHeight={needTruncate ? 40 : undefined}>
<Text
fontSize="sm"
color={nameColor}
lineHeight="1.8"
>
{relationText}
</Text>
</Collapse>
{/* 合规提示 */} {/* 合规提示 */}
<Text <Text
fontSize="xs" fontSize="xs"
color="gray.500" color="gray.500"
mt={3} mt={3}
fontStyle="italic" fontStyle="italic"
> >
⚠️ 以上关联描述由AI生成，仅供参考，不构成投资建议 ⚠️ 以上关联描述由AI生成，仅供参考，不构成投资建议
</Text> </Text>
</Box> </Box>
)} )}
</Box> </Box>
</Tooltip>
{/* 股票详情弹窗 - 未打开时不渲染 */} {/* 股票详情弹窗 - 未打开时不渲染 */}
{isModalOpen && ( {isModalOpen && (