diff --git a/src/views/Community/components/DynamicNewsDetail/StockListItem.js b/src/views/Community/components/DynamicNewsDetail/StockListItem.js index 73cf5551..183f3be0 100644 --- a/src/views/Community/components/DynamicNewsDetail/StockListItem.js +++ b/src/views/Community/components/DynamicNewsDetail/StockListItem.js @@ -6,15 +6,12 @@ import { Box, Flex, VStack, + HStack, Text, Button, IconButton, Collapse, - Stat, - StatLabel, - StatNumber, - StatHelpText, - StatArrow, + Tooltip, useColorModeValue, } from '@chakra-ui/react'; import { StarIcon } from '@chakra-ui/icons'; @@ -104,110 +101,108 @@ const StockListItem = ({ return ( <> - - {/* 横向布局:左侧基础信息 + 中间图表 + 右侧操作按钮 */} - - {/* 左侧:基础信息区(股票代码、名称、涨跌幅) */} - - {/* 股票代码和名称 */} - - - + {/* 单行布局:股票代码 + 名称 + 涨跌幅 + 分时图 + K线图 */} + + {/* 左侧:股票代码 + 名称 + 自选按钮 */} + + + - - {stock.stock_code} - - - {onWatchlistToggle && ( - } - onClick={handleWatchlistClick} - aria-label={isInWatchlist ? '已关注' : '加自选'} - title={isInWatchlist ? '已关注' : '加自选'} - borderRadius="full" - /> - )} - + {stock.stock_code} + + {stock.stock_name} - + {onWatchlistToggle && ( + } + onClick={handleWatchlistClick} + aria-label={isInWatchlist ? '已关注' : '加自选'} + title={isInWatchlist ? '已关注' : '加自选'} + borderRadius="full" + flexShrink={0} + /> + )} + - {/* 涨跌幅 - 使用 Stat 组件 */} - - + 涨跌幅 - - + {formatChange(change)} - - {change !== null && change !== undefined && !isNaN(change) && ( - - = 0 ? 'increase' : 'decrease'} /> - {Math.abs(change).toFixed(2)}% - - )} - - + + - {/* 中间:图表区(分时图 + K线图) */} - e.stopPropagation()} minW={0}> {/* 分时图 */} e.stopPropagation()} _hover={{ borderColor: useColorModeValue('blue.300', 'blue.500'), boxShadow: 'md' @@ -226,7 +222,7 @@ const StockListItem = ({ e.stopPropagation()} _hover={{ borderColor: useColorModeValue('purple.300', 'purple.500'), boxShadow: 'md' @@ -258,7 +255,7 @@ const StockListItem = ({ setIsModalOpen(true)} /> - + - {/* 右侧:操作按钮 */} - - - - - - {/* 关联描述(折叠区域) */} - {relationText && relationText !== '--' && ( - - - - 关联描述 - - {needTruncate && ( - + )} + + + - {isDescExpanded ? '收起 ▲' : '展开 ▼'} - - )} - - - - {relationText} - - + {relationText} + + - {/* 合规提示 */} - - ⚠️ 以上关联描述由AI生成,仅供参考,不构成投资建议 - - - )} - + {/* 合规提示 */} + + ⚠️ 以上关联描述由AI生成,仅供参考,不构成投资建议 + + + )} + + {/* 股票详情弹窗 - 未打开时不渲染 */} {isModalOpen && (