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

fix: UI调试

Browse Source
This commit is contained in:
zdl
2025-11-27 18:27:44 +08:00
parent 589e1c20f9
commit 34338373cd
3 changed files with 92 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/Citation/CitedContent.js
View File

@@ -82,29 +82,9 @@ const CitedContent = ({
...containerStyle ...containerStyle
}} }}
> >
{/* AI 标识 - 固定在右上角 */}
{showAIBadge && (
<Tag
icon={<RobotOutlined />}
color="purple"
style={{
position: 'absolute',
top: 12,
right: 12,
margin: 0,
zIndex: 10,
fontSize: 12,
padding: '2px 8px'
}}
className="ai-badge-responsive"
>
AI合成
</Tag>
)}
{/* 标题栏 */} {/* 标题栏 */}
{title && ( {title && (
<div style={{ marginBottom: 12, paddingRight: 80 }}> <div style={{ marginBottom: 12 }}>
<Text strong style={{ fontSize: 14, color: finalTitleColor }}> <Text strong style={{ fontSize: 14, color: finalTitleColor }}>
{title} {title}
</Text> </Text>
@@ -112,10 +92,24 @@ const CitedContent = ({
)} )}
{/* 带引用的文本内容 */} {/* 带引用的文本内容 */}
<div style={{ <div style={{ lineHeight: 1.8 }}>
lineHeight: 1.8, {/* AI 标识 - 行内显示在文字前面 */}
paddingRight: title ? 0 : (showAIBadge ? 80 : 0) {showAIBadge && (
}}> <Tag
icon={<RobotOutlined />}
color="purple"
style={{
fontSize: 12,
padding: '2px 8px',
marginRight: 8,
verticalAlign: 'middle',
display: 'inline-flex',
}}
className="ai-badge-responsive"
>
AI合成
</Tag>
)}
{/* 前缀标签（如果有） */} {/* 前缀标签（如果有） */}
{prefix && ( {prefix && (
<Text style={{ <Text style={{

36
src/views/EventDetail/components/HistoricalEvents.js
View File

@@ -29,10 +29,12 @@ import {
FaChartLine, FaChartLine,
FaInfoCircle FaInfoCircle
} from 'react-icons/fa'; } from 'react-icons/fa';
import { stockService } from '../../../services/eventService'; import { Tag } from 'antd';
import { logger } from '../../../utils/logger'; import { RobotOutlined } from '@ant-design/icons';
import CitedContent from '../../../components/Citation/CitedContent'; import { stockService } from '@services/eventService';
import { PROFESSIONAL_COLORS } from '../../../constants/professionalTheme'; import { logger } from '@utils/logger';
import CitedContent from '@components/Citation/CitedContent';
import { PROFESSIONAL_COLORS } from '@constants/professionalTheme';
const HistoricalEvents = ({ const HistoricalEvents = ({
events = [], events = [],
@@ -244,7 +246,7 @@ const HistoricalEvents = ({
key={event.id} key={event.id}
bg={cardBg} bg={cardBg}
borderWidth="1px" borderWidth="1px"
borderColor={borderColor} borderColor="gray.500"
borderRadius="lg" borderRadius="lg"
position="relative" position="relative"
overflow="visible" overflow="visible"
@@ -267,16 +269,16 @@ const HistoricalEvents = ({
}} }}
transition="all 0.2s" transition="all 0.2s"
> >
<VStack align="stretch" spacing={2} p={3}> <VStack align="stretch" spacing={3} p={4}>
{/* 顶部区域：左侧（标题+时间） + 右侧（按钮） */} {/* 顶部区域：左侧（标题+时间） + 右侧（按钮） */}
<HStack align="flex-start" spacing={3}> <HStack align="flex-start" spacing={3}>
{/* 左侧：标题 + 时间信息（允许折行） */} {/* 左侧：标题 + 时间信息（允许折行） */}
<VStack flex="1" align="flex-start" spacing={1}> <VStack flex="1" align="flex-start" spacing={2}>
{/* 标题 */} {/* 标题 */}
<Text <Text
fontSize="md" fontSize="lg"
fontWeight="bold" fontWeight="bold"
color={useColorModeValue('blue.600', 'blue.400')} color={useColorModeValue('blue.500', 'blue.300')}
lineHeight="1.4" lineHeight="1.4"
cursor="pointer" cursor="pointer"
onClick={(e) => { onClick={(e) => {
@@ -290,27 +292,28 @@ const HistoricalEvents = ({
{/* 时间 + Badges（允许折行） */} {/* 时间 + Badges（允许折行） */}
<HStack spacing={2} flexWrap="wrap"> <HStack spacing={2} flexWrap="wrap">
<Text fontSize="sm" color={textSecondary}> <Text fontSize="sm" color="gray.300" fontWeight="medium">
{formatDate(getEventDate(event))} {formatDate(getEventDate(event))}
</Text> </Text>
<Text fontSize="sm" color={textSecondary}> <Text fontSize="sm" color="gray.400">
({getRelativeTime(getEventDate(event))}) ({getRelativeTime(getEventDate(event))})
</Text> </Text>
{event.importance && ( {event.importance && (
<Badge colorScheme={importanceColor} size="sm"> <Badge colorScheme={importanceColor} fontSize="xs" px={2}>
重要性: {event.importance} 重要性: {event.importance}
</Badge> </Badge>
)} )}
{event.avg_change_pct !== undefined && event.avg_change_pct !== null && ( {event.avg_change_pct !== undefined && event.avg_change_pct !== null && (
<Badge <Badge
colorScheme={event.avg_change_pct > 0 ? 'red' : event.avg_change_pct < 0 ? 'green' : 'gray'} colorScheme={event.avg_change_pct > 0 ? 'red' : event.avg_change_pct < 0 ? 'green' : 'gray'}
size="sm" fontSize="xs"
px={2}
> >
涨幅: {event.avg_change_pct > 0 ? '+' : ''}{event.avg_change_pct.toFixed(2)}% 涨幅: {event.avg_change_pct > 0 ? '+' : ''}{event.avg_change_pct.toFixed(2)}%
</Badge> </Badge>
)} )}
{event.similarity !== undefined && event.similarity !== null && ( {event.similarity !== undefined && event.similarity !== null && (
<Badge colorScheme={getSimilarityColor(event.similarity)} size="sm"> <Badge colorScheme={getSimilarityColor(event.similarity)} fontSize="xs" px={2}>
相关度: {event.similarity} 相关度: {event.similarity}
</Badge> </Badge>
)} )}
@@ -344,10 +347,9 @@ const HistoricalEvents = ({
data={content} data={content}
title="" title=""
showAIBadge={true} showAIBadge={true}
textColor={PROFESSIONAL_COLORS.text.primary} textColor="#E2E8F0"
containerStyle={{ containerStyle={{
backgroundColor: useColorModeValue('#f7fafc', 'rgba(45, 55, 72, 0.6)'), backgroundColor: 'transparent',
borderRadius: '8px',
padding: '0', padding: '0',
}} }}
/> />

71
src/views/EventDetail/components/TransmissionChainAnalysis.js
View File

@@ -826,8 +826,8 @@ const TransmissionChainAnalysis = ({ eventId }) => {
<Modal isOpen={isModalOpen} onClose={handleCloseModal} size="xl"> <Modal isOpen={isModalOpen} onClose={handleCloseModal} size="xl">
<ModalOverlay /> <ModalOverlay />
<ModalContent maxH="80vh" bg={modalBgColor}> <ModalContent maxH="80vh" bg={modalBgColor}>
<ModalHeader borderBottom="1px solid" borderColor={modalBorderColor}> <ModalHeader borderBottom="1px solid" borderColor={modalBorderColor} pr={12}>
<HStack justify="space-between"> <HStack justify="space-between" pr={2}>
<Text color={PROFESSIONAL_COLORS.text.primary}>{selectedNode ? '节点详情' : '传导链分析'}</Text> <Text color={PROFESSIONAL_COLORS.text.primary}>{selectedNode ? '节点详情' : '传导链分析'}</Text>
{selectedNode && ( {selectedNode && (
<Badge <Badge
@@ -841,7 +841,10 @@ const TransmissionChainAnalysis = ({ eventId }) => {
)} )}
</HStack> </HStack>
</ModalHeader> </ModalHeader>
<ModalCloseButton /> <ModalCloseButton
color={PROFESSIONAL_COLORS.text.secondary}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
/>
<ModalBody overflowY="auto"> <ModalBody overflowY="auto">
{selectedNode ? ( {selectedNode ? (
@@ -1084,11 +1087,15 @@ const TransmissionChainAnalysis = ({ eventId }) => {
prefix="机制:" prefix="机制:"
prefixStyle={{ fontSize: 12, color: PROFESSIONAL_COLORS.text.secondary, fontWeight: 'bold' }} prefixStyle={{ fontSize: 12, color: PROFESSIONAL_COLORS.text.secondary, fontWeight: 'bold' }}
textColor={PROFESSIONAL_COLORS.text.primary} textColor={PROFESSIONAL_COLORS.text.primary}
containerStyle={{ marginTop: 8 }} containerStyle={{
marginTop: 8,
backgroundColor: 'transparent',
padding: 0,
}}
showAIBadge={false} showAIBadge={false}
/> />
) : parent.transmission_mechanism ? ( ) : parent.transmission_mechanism ? (
<Text fontSize="xs" color="gray.600"> <Text fontSize="xs" color={PROFESSIONAL_COLORS.text.secondary}>
机制: {parent.transmission_mechanism}（AI合成） 机制: {parent.transmission_mechanism}（AI合成）
</Text> </Text>
) : null} ) : null}
@@ -1105,23 +1112,42 @@ const TransmissionChainAnalysis = ({ eventId }) => {
{/* 影响输出 */} {/* 影响输出 */}
{(() => { {(() => {
const targetsFromAPI = nodeDetail && nodeDetail.children && nodeDetail.children.length > 0; const targetsFromAPI = nodeDetail && nodeDetail.children && nodeDetail.children.length > 0;
if (targetsFromAPI) { if (targetsFromAPI) {
return ( return (
<Box> <Box>
<Text fontWeight="bold" mb={2} color="blue.600"> <Text fontWeight="bold" mb={2} color={PROFESSIONAL_COLORS.gold[500]}>
影响输出 ({nodeDetail.children.length}) 影响输出 ({nodeDetail.children.length})（AI合成）
</Text> </Text>
<List spacing={2}> <List spacing={2}>
{nodeDetail.children.map((child, index) => ( {nodeDetail.children.map((child, index) => (
<ListItem key={index} p={2} bg="gray.50" borderRadius="md" borderLeft="3px solid" borderColor="orange.300" position="relative"> <ListItem
key={index}
p={2}
bg={PROFESSIONAL_COLORS.background.secondary}
borderRadius="md"
borderLeft="3px solid"
borderColor="#FB923C"
position="relative"
>
{child.direction && ( {child.direction && (
<Box position="absolute" top={2} right={2} zIndex={1}> <Box position="absolute" top={2} right={2} zIndex={1}>
<Badge <Badge
colorScheme={ bg={
child.direction === 'positive' ? 'green' : child.direction === 'positive' ? 'rgba(16, 185, 129, 0.15)' :
child.direction === 'negative' ? 'red' : child.direction === 'negative' ? 'rgba(239, 68, 68, 0.15)' :
'gray' 'rgba(107, 114, 128, 0.15)'
}
color={
child.direction === 'positive' ? '#10B981' :
child.direction === 'negative' ? '#EF4444' :
'#6B7280'
}
borderWidth="1px"
borderColor={
child.direction === 'positive' ? '#10B981' :
child.direction === 'negative' ? '#EF4444' :
'#6B7280'
} }
size="sm" size="sm"
> >
@@ -1132,7 +1158,7 @@ const TransmissionChainAnalysis = ({ eventId }) => {
</Box> </Box>
)} )}
<VStack align="stretch" spacing={1}> <VStack align="stretch" spacing={1}>
<Text fontWeight="bold" fontSize="sm" pr={child.direction ? 20 : 0}>{child.name}</Text> <Text fontWeight="bold" fontSize="sm" color={PROFESSIONAL_COLORS.text.primary} pr={child.direction ? 20 : 0}>{child.name}</Text>
{child.transmission_mechanism?.data ? ( {child.transmission_mechanism?.data ? (
<CitedContent <CitedContent
data={child.transmission_mechanism} data={child.transmission_mechanism}
@@ -1140,11 +1166,15 @@ const TransmissionChainAnalysis = ({ eventId }) => {
prefix="机制:" prefix="机制:"
prefixStyle={{ fontSize: 12, color: PROFESSIONAL_COLORS.text.secondary, fontWeight: 'bold' }} prefixStyle={{ fontSize: 12, color: PROFESSIONAL_COLORS.text.secondary, fontWeight: 'bold' }}
textColor={PROFESSIONAL_COLORS.text.primary} textColor={PROFESSIONAL_COLORS.text.primary}
containerStyle={{ marginTop: 8 }} containerStyle={{
marginTop: 8,
backgroundColor: 'transparent',
padding: 0,
}}
showAIBadge={false} showAIBadge={false}
/> />
) : child.transmission_mechanism ? ( ) : child.transmission_mechanism ? (
<Text fontSize="xs" color="gray.600"> <Text fontSize="xs" color={PROFESSIONAL_COLORS.text.secondary}>
机制: {child.transmission_mechanism}（AI合成） 机制: {child.transmission_mechanism}（AI合成）
</Text> </Text>
) : null} ) : null}
@@ -1169,7 +1199,14 @@ const TransmissionChainAnalysis = ({ eventId }) => {
</ModalBody> </ModalBody>
<ModalFooter borderTop="1px solid" borderColor={modalBorderColor}> <ModalFooter borderTop="1px solid" borderColor={modalBorderColor}>
<Button onClick={handleCloseModal}>关闭</Button> <Button
onClick={handleCloseModal}
variant="ghost"
color={PROFESSIONAL_COLORS.text.secondary}
_hover={{ bg: 'rgba(255, 255, 255, 0.1)' }}
>
关闭
</Button>
</ModalFooter> </ModalFooter>
</ModalContent> </ModalContent>
</Modal> </Modal>