fix: 修复相关股票默认展开和添加超预期得分显示

- 修复事件切换时相关股票被设为折叠的问题,改为默认展开
- 在事件详情面板中添加超预期得分显示(带进度条和配色)
- 超预期得分显示在事件描述下方、相关股票上方
This commit is contained in:
2025-12-03 08:34:41 +08:00
parent 2f580c3c1f
commit 1f592b6775

View File

@@ -8,14 +8,18 @@ import {
Card,
CardBody,
VStack,
HStack,
Text,
Spinner,
Center,
Wrap,
WrapItem,
Icon,
Progress,
useColorModeValue,
useToast,
} from '@chakra-ui/react';
import { FaChartLine } from 'react-icons/fa';
import { getImportanceConfig } from '../../../../constants/importanceLevels';
import { eventService } from '../../../../services/eventService';
import { useEventStocks } from '../StockDetailPanel/hooks/useEventStocks';
@@ -225,8 +229,8 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
setHasLoadedHistorical(false);
setHasLoadedTransmission(false);
// 相关股票默认折叠,但预加载股票列表(显示数量吸引点击)
setIsStocksOpen(false);
// 相关股票默认展开,预加载股票列表
setIsStocksOpen(true);
if (canAccessStocks) {
console.log('%c📊 [相关股票] 事件切换,预加载股票列表(获取数量)', 'color: #10B981; font-weight: bold;', { eventId: event?.id });
loadStocksData();
@@ -332,6 +336,76 @@ const DynamicNewsDetailPanel = ({ event, showHeader = true }) => {
{/* 事件描述 */}
<EventDescriptionSection description={event.description} />
{/* 超预期得分显示 - 参考历史事件对比的样式 */}
{expectationScore != null && expectationScore > 0 && (
<Box
p={3}
bg={useColorModeValue(
expectationScore >= 60 ? 'red.50' : expectationScore >= 40 ? 'orange.50' : 'yellow.50',
expectationScore >= 60 ? 'red.900' : expectationScore >= 40 ? 'orange.900' : 'yellow.900'
)}
borderColor={useColorModeValue(
expectationScore >= 60 ? 'red.200' : expectationScore >= 40 ? 'orange.200' : 'yellow.200',
expectationScore >= 60 ? 'red.700' : expectationScore >= 40 ? 'orange.700' : 'yellow.700'
)}
borderWidth="1px"
borderRadius="md"
>
<HStack spacing={3} justify="space-between">
<HStack spacing={2}>
<Icon
as={FaChartLine}
color={useColorModeValue(
expectationScore >= 60 ? 'red.600' : expectationScore >= 40 ? 'orange.600' : 'yellow.600',
expectationScore >= 60 ? 'red.300' : expectationScore >= 40 ? 'orange.300' : 'yellow.300'
)}
boxSize="18px"
/>
<Text
fontSize="sm"
fontWeight="bold"
color={useColorModeValue(
expectationScore >= 60 ? 'red.700' : expectationScore >= 40 ? 'orange.700' : 'yellow.800',
expectationScore >= 60 ? 'red.200' : expectationScore >= 40 ? 'orange.200' : 'yellow.200'
)}
>
超预期得分
</Text>
</HStack>
<HStack spacing={3} flex={1} maxW="200px">
<Progress
value={expectationScore}
max={100}
size="sm"
flex={1}
colorScheme={expectationScore >= 60 ? 'red' : expectationScore >= 40 ? 'orange' : 'yellow'}
borderRadius="full"
bg={useColorModeValue('gray.200', 'gray.600')}
/>
<Text
fontSize="lg"
fontWeight="bold"
color={useColorModeValue(
expectationScore >= 60 ? 'red.600' : expectationScore >= 40 ? 'orange.600' : 'yellow.700',
expectationScore >= 60 ? 'red.300' : expectationScore >= 40 ? 'orange.300' : 'yellow.300'
)}
minW="40px"
textAlign="right"
>
{expectationScore}
</Text>
</HStack>
</HStack>
<Text
fontSize="xs"
color={useColorModeValue('gray.600', 'gray.400')}
mt={1}
>
基于历史事件判断当前事件的超预期情况满分100分
</Text>
</Box>
)}
{/* 相关股票(可折叠) - 懒加载 - 需要 PRO 权限 - 支持精简/详细模式 */}
<CollapsibleSection
title="相关股票"